在React Native中动画backgroundColor [英] Animating backgroundColor in 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，你必须经历红色。添加更多颜色混合，你最终在20世纪80年代的迪斯科舞厅。

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 。

You can find full working example in the issue I've posted on github.

这篇关于在React Native中动画backgroundColor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！