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

前端之家收集整理的这篇文章主要介绍了反应本机 – 在React Native中动画backgroundColor前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在React Native中,我将如何从一种颜色动画化到另一种颜色.我发现通过插入一个Animated.Value,你可以通过以下方式激活颜色:
  1. var BLACK = 0;
  2. var RED = 1;
  3. var BLUE = 2;
  4.  
  5. backgroundColor: this.state.color.interpolate({
  6. inputRange: [BLACK,RED,BLUE],outputRange: ['rgb(0,0)','rgb(255,'rgb(0,255)']
  7. })

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

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

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

谢谢.

给定你有Animated.Value可以说x,你可以这样内插颜色:
  1. render() {
  2. var color = this.state.x.interpolate({
  3. inputRange: [0,300],outputRange: ['rgba(255,1)','rgba(0,255,1)']
  4. });
  5.  
  6. return (
  7. <View style={{backgroundColor:color}}></View>
  8. );
  9. }

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

猜你在找的React相关文章