Невозможно интерполировать цвет при перемещении объекта - PullRequest
Новая
       7

Невозможно интерполировать цвет при перемещении объекта

0 голосов
/ 06 июня 2018 

import React, { Component } from 'react';
import { View, Animated } from 'react-native';

const ANIMATION_DURATION = 250;

class Ball extends Component {
  
  componentWillMount() {
    this.position = new Animated.ValueXY(0,0);
    this.borderC = new Animated.Value(0);
    
    Animated.parallel([
      Animated.timing(this.position, {
        toValue: { x: 200, y: 500 },
        duration: ANIMATION_DURATION
      }),
      Animated.timing(this.borderC, {
        toValue: 1,
        duration: ANIMATION_DURATION,
      })
    ]).start();
  }
  
  
  render() {
    const styl = {
      ball: {
        height: 60,
        width: 60,
        borderRadius: 30,
        borderWidth: 30,
        borderColor: this.borderC.interpolate({
          inputRange: [0, 1],
          outputRange: ['green', 'yellow'],
        })
      }
    }
  
    return (
      <Animated.View style={this.position.getLayout()}>
        <View style={styl.ball}/>
      </Animated.View>
    );
  }
}



export default Ball

У меня есть простой компонент, который пытается переместить шар из одной точки в другую и в то же время меняет цвет с зеленого на желтый.Ошибка не выбрасывается, и мяч движется.Однако я не мог понять, какая часть могла пойти не так.

Я реализовал Animated.parallel, чтобы анимация работала вместе, и реализовал interpolate в borderColor с inputRange1 and 0, а также outputRange

Это Экспо закуска для вас, чтобы поиграть

1 Ответ

0 голосов
/ 06 июня 2018

Ваш второй View компонент, для которого требуется переход border-color, должен быть тоже Animated.View.

Образец 

  render() {
    const style = {
      ball: {
        height: 60,
        width: 60,
        borderRadius: 30,
        borderWidth: 30,
        borderColor: this.borderC.interpolate({
          inputRange: [0, 1],
          outputRange: ['green', 'yellow'],
        })
      }
    }

    return (
      <Animated.View style={this.position.getLayout()}>
        <Animated.View style={styl.ball}/>
      </Animated.View>
    );
  }
...