反应本机 – 在React Native中动画backgroundColor

发布时间：2020-12-15 20:52:31 所属栏目：百科来源：网络整理

导读：在React Native中,我将如何从一种颜色动画化到另一种颜色.我发现通过插入一个Animated.Value,你可以通过以下方式激活颜色： var BLACK = 0;var RED = 1;var BLUE = 2;backgroundColor: this.state.color.interpolate({ inputRange: [BLACK,RED,BLUE],outputR

在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)','rgb(255,'rgb(0,255)']
})

和

Animated.timing(this.state.color,{toValue: RED}).start();

但是使用这种方式,从黑色到蓝色,你必须穿红色.添加更多的颜色到混合,你最终在20世纪80年代迪斯科舞厅.

这样做的另一种方法是允许你直接从一种颜色到另一种颜色？

谢谢.

给定你有Animated.Value可以说x,你可以这样内插颜色：

render() {
    var color = this.state.x.interpolate({
        inputRange: [0,300],outputRange: ['rgba(255,1)','rgba(0,255,1)']
    });

    return (
        <View style={{backgroundColor:color}}></View>
    );
}

您可以在github发布的问题中找到完整的工作示例.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!