React Native 中的动画背景色 [英] Animating backgroundColor in React Native
本文介绍了React Native 中的动画背景色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将如何在 React Native 中将动画从一种颜色转换为另一种颜色.我发现通过插入 Animated.Value 您可以通过以下方式对颜色进行动画处理:
How would I go about animating from one color to another in React Native. I've found that by interpolating an Animated.Value you can animate colors by:
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,你必须经过红色.在混合中添加更多颜色,您最终会进入 1980 年代的迪斯科舞厅.
But using this method, going from BLACK to BLUE, you have to go through red. Add more colors to the mix and you end up in a 1980s disco.
是否有另一种方法可以让您直接从一种颜色切换到另一种颜色?
Is there another way of doing this that allows you to go straight from one color to another?
推荐答案
如果你有 Animated.Value
比方说 x
,你可以像这样插入颜色:>
Given you have Animated.Value
lets say x
, you can interpolate color like this:
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.
这篇关于React Native 中的动画背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文