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；