Animating backgroundColor in React Native
JavascriptReact NativeJavascript Problem Overview
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)']
})
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.
Is there another way of doing this that allows you to go straight from one color to another?
Javascript Solutions
Solution 1 - Javascript
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>
);
}
You can find full working example in the issue I've posted on github.
Solution 2 - Javascript
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.
Solution 3 - Javascript
const animatedBkg = interpolate(scale, {
inputRange: [0, 150],
outputRange: [Animated.color(242, 81, 48), Animated.color(0,0,0)],
// extrapolate: Extrapolate.CLAMP,
})
tested with reanimated.
Solution 4 - Javascript
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']
})
}}>
Solution 5 - Javascript
Use setValue
and state to control start and end colors.