Question

如何在React Native中将动画从一种颜色动画到另一种颜色。我发现通过插入Animated.Value，你可以通过以下方式为颜色设置动画：

var BLACK = 0;
var RED = 1;
var BLUE = 2;

backgroundColor: this.state.color.interpolate({
  inputRange: [BLACK, RED, BLUE],
  outputRange: ['rgb(0, 0, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)']
})

和

Animated.timing(this.state.color, {toValue: RED}).start();

但是使用这种方法，从BLACK到BLUE，你必须经历红色。添加更多颜色混合，最终成为20世纪80年代的迪斯科舞厅。

是否有其他方法可以让您直接从一种颜色转到另一种颜色？

Answer 1

假设Animated.Value让我们说x，你可以这样插入颜色：

render() {
    var color = this.state.x.interpolate({
        inputRange: [0, 300],
        outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
    });

    return (
        <Animated.View style={{backgroundColor:color}}></Animated.View>
    );
}

您可以在我github上发布的问题中找到完整的工作示例。

Answer 2

如果您在按下按钮的瞬间获得动画颜色值的颜色，那么您可能会这样做。像这样：

var currentColor = ? : 
this.state.color = 0; 
var bgColor = this.state.color.interpolate({
  inputRange: [0, 1],
  outputRange: [currentColor, targetColor]
});

因此，对于每个按钮，您需要设置不同的targetColor。

Answer 3

const animatedBkg = interpolate(scale, {
  inputRange: [0, 150],
  outputRange: [Animated.color(242, 81, 48), Animated.color(0,0,0)],
  // extrapolate: Extrapolate.CLAMP,
})

经过重新测试。

Answer 4

您还可以逐步插入非颜色等数字值，如下所示：

<Animated.Text
  style={{
    color: colorAnim.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: ['black', 'gray', 'white']
  })
}}>

Answer 5

使用setValue和州来控制开始和结束颜色。

在React Native中动画backgroundColor

5 个答案: