Javascript React Native 中的动画背景色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32622466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animating backgroundColor in React Native
提问by nicholas
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:
我将如何在 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)']
})
and
和
Animated.timing(this.state.color, {toValue: RED}).start();
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.
但是使用这种方法，从黑色到蓝色，你必须经过红色。在混合中添加更多颜色，您最终会进入 1980 年代的迪斯科舞厅。
Is there another way of doing this that allows you to go straight from one color to another?
是否有另一种方法可以让您直接从一种颜色转到另一种颜色？
回答by neciu
Given you have Animated.Valuelets say x, you can interpolate color like this:
鉴于您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>
);
}
You can find full working example in the issue I've posted on github.
您可以在我在github 上发布的问题中找到完整的工作示例。
回答by cmrichards
If you could get the color of the animated color value at the instant you pressed the button then you could probably do it. Something like this :
如果您可以在按下按钮的那一刻获得动画颜色值的颜色，那么您可能可以做到。像这样的事情：
var currentColor = ? :
this.state.color = 0;
var bgColor = this.state.color.interpolate({
inputRange: [0, 1],
outputRange: [currentColor, targetColor]
});
So for each button you'd set a different targetColor.
因此，对于每个按钮，您需要设置不同的 targetColor。
回答by rajendra upadhyay
const animatedBkg = interpolate(scale, {
inputRange: [0, 150],
outputRange: [Animated.color(242, 81, 48), Animated.color(0,0,0)],
// extrapolate: Extrapolate.CLAMP,
})
tested with reanimated.
用复活测试。
回答by Luke W
You can also interpolate in steps, for non-numeric values like color, like this:
您还可以按步骤对非数字值（如颜色）进行插值，如下所示：
<Animated.Text
style={{
color: colorAnim.interpolate({
inputRange: [0, 0.5, 1],
outputRange: ['black', 'gray', 'white']
})
}}>
回答by browniefed
Use setValueand state to control start and end colors.
使用setValue和状态来控制开始和结束颜色。
