如何在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();
但是使用这种方法,从黑色到蓝色,你必须通过红色。在混合中加入更多的颜色,你就会进入20世纪80年代的迪斯科舞厅。
有没有其他方法可以让你直接从一种颜色切换到另一种颜色?
发布于 2015-11-27 21:31:58
假设你有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上发布的问题中找到完整的工作示例。
发布于 2015-09-18 03:22:06
如果您可以在按下按钮的瞬间获得动画颜色值的颜色,那么您可能会这样做。如下所示:
var currentColor = ? :
this.state.color = 0;
var bgColor = this.state.color.interpolate({
inputRange: [0, 1],
outputRange: [currentColor, targetColor]
});
因此,对于每个按钮,您需要设置一个不同的targetColor。
发布于 2020-03-13 03:36:11
const animatedBkg = interpolate(scale, {
inputRange: [0, 150],
outputRange: [Animated.color(242, 81, 48), Animated.color(0,0,0)],
// extrapolate: Extrapolate.CLAMP,
})
已使用复活进行了测试。
https://stackoverflow.com/questions/32622466
复制相似问题