动画背景颜色在反应本机

我将如何去从一种颜色到另一种动画在反应本机。我通过插入一个动画。值，您可以通过以下方法使颜色具有动画效果:

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();

但是使用这个方法，从黑色到蓝色，你必须通过红色。加入更多的颜色混合，你最终在20世纪80年代的迪斯科。

还有其他的方法可以让你直接从一种颜色转换到另一种颜色吗？

68892 次浏览
小开

如果你能在按下按钮的瞬间得到动画颜色值的颜色，那么你就可以做到这一点。就像这样:

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

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

小开

假设你有 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上的问题中找到完整的工作例子。

小开

使用 setValue和状态控制开始和结束颜色。

小开

对于颜色这样的非数值，也可以按步骤进行插值，如下所示:

<Animated.Text
style=\{\{
color: colorAnim.interpolate({
inputRange: [0, 0.5, 1],
outputRange: ['black', 'gray', 'white']
})
}}>
小开 
const animatedBkg = interpolate(scale, {
inputRange: [0, 150],
outputRange: [Animated.color(242, 81, 48), Animated.color(0,0,0)],
// extrapolate: Extrapolate.CLAMP,
})

用复活剂测试。

小开

我在这里创建了一个示例，说明如何使用最新版本的动作原生版本实现这一点。

Https://cjoshmartin.com/blog/react-native-animations-example/

你可浏览此网页了解更多资料: Https://www.codedaily.io/courses/master-react-native-animations/color-background-color Https://reactnative.dev/docs/animations


提交答案