移动对象时无法插入颜色

Question

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 以便将动画运行放在一起，并在 borderColor 实现了 interpolate，inputRange 为 [=15] =] 以及 outputRange

这是Expo snack你玩的地方

Answer 1

您的第二个 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>
    );
  }

移动对象时无法插入颜色

Unable to interpolate color while moving object

interpolation

react-native

react-animated