react native动画-闪光背景动画实现

老规矩，先上效果图！没有效果图的动画分享都是耍流氓。

首先分析动画需求-点击宝箱后，显示金币模态窗，固然是用react自带的Modal模块；同时出现两个动画，1，金币光芒顺时针旋转；2，金币周围的小点闪烁；

以上两个动画拆解完毕，接下来上代码

动画效果一金币光芒旋转

react部分

<Animated.Image
    style={
      [styles.backshine,
        {transform: [
            { rotate: this.state.rotate.interpolate(
            inputRange:{[0,1], 
            outputRange:['0deg', '360deg']})}
            ]
        }
      ]
    }
    source={require('resource/newtask/backshine.png')}
 />
复制代码

js部分

_animateStart=()=>{
    this.state.fadeInOpacity.setValue(0);
    this.state.rotation.setValue(0);
    Animated.loop(Animated.timing(this.state.rotation, {
      toValue: 1,
      duration:4000,
      easing:Easing.linear,
      delay:0,
      useNativeDriver:true, // 启用原生动画驱动
      isInteraction: false
    });
    ).start();
  };
复制代码

Animated.loop(animation, config).start()，循环播放动画；详细见官方文档； useNativeDriver:true, //启用原生动画驱动；
能极大提高动画流畅度，没加原生驱动，动画会出现卡顿现象；推荐使用；但要注意原生驱动不支持全部css3动画；
InteractionManager:false：指定本动画是否在InteractionManager的队列中注册以影响其任务调度。默认值为 true。在此动画中设置为false；（官网释义能够说很是难懂），我本身的理解：在InteractionManager的队列中注册，意味着等全部互动或动画完成以后再执行此动画，好处就是不影响其余交互或动画流畅度；

动画效果二金币周围小点闪烁

react部分：

<Animated.Image
    style={[
       styles.shiningbg,
       {opacity: this.state.opacity.interpolate(
       {inputRange: [0,0.5,1], 
       outputRange:[0,1,0]}
       )}
      ]}
    source={require('resource/newtask/shiningbg.png')}
/>
复制代码

interpolate 插值函数,能够看到透明度的变化是0-1-0，若是透明度变化写成0-1，效果只有从暗变到明，不会从明变到暗；因此须要写成0-1-0；

js部分：

Animated.loop(Animated.timing(this.state.fadeInOpacity, {
      toValue: 1,
      duration:2000,
      easing:Easing.linear,
      delay:300,
      useNativeDriver:true, // 启用原生动画驱动
      isInteraction: false
    });
    ).start();
复制代码

最后提一句，app名字 — “种子视频”，动画在android端app；