我将如何在 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();
但是使用这种方法,从黑色到蓝色,你必须经过红色。在混音中添加更多颜色,您最终会进入 1980 年代的迪斯科舞厅。
是否有另一种方法可以让您直接从一种颜色转到另一种颜色?
最佳答案
假设你有 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 上的问题中找到完整的工作示例.
关于javascript - 在 React Native 中设置背景颜色动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32622466/