在React Native中设置backgroundColor动画
在React Native中设置backgroundColor动画
提问于 2015-09-17 12:12:55
如何在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年代的迪斯科舞厅。
有没有其他方法可以让你直接从一种颜色切换到另一种颜色？
回答 5
Stack Overflow用户
发布于 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上发布的问题中找到完整的工作示例。
Stack Overflow用户
发布于 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。
Stack Overflow用户
发布于 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,
})已使用复活进行了测试。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32622466
复制相关文章
相似问题