react-native 金幣綵帶雨下落動畫

日常專案中，經常遇到一些表情雨/金幣雨/綵帶雨 等下落的動畫，之前做android原生的時候，寫過類似的效果，主要通過自定義view 在onDraw裡繪製下落的過程，具體可以看下我的這篇github地址android 仿微信表情雨下落，現在轉戰 react-native，同樣可以實現這樣的效果，主要用到的動畫庫 react-native-animatable

安裝 yarn add react-native-animatable庫

主要用到的動畫是移動下落，即translateY，從螢幕頂部下落至底部，同時過程中可以左右搖擺，每次隨機圖片下落。

_FailAnimation = ({style,duration,delay,startY,speed,children}) => {
    return <Animatable.View //下落動畫
        style={style}
        duration={duration}
        delay={delay}
        animation={{
            from: {translateY: startY},
            to: {translateY: this.state.parentHeight + speed}
        }}
        easing={t => Math.pow(t, 1.2)}
        useNativeDriver>
        {children}
    </Animatable.View>
}

_SwingAnimation = ({delay, duration, children}) => {
    return <Animatable.View  //左右搖擺動畫
        animation={{
            0: {
                translateX: -12,
                rotate: '10deg',
            },
            0.5: {
                translateX: 0,
                rotate: '0deg',
            },
            1: {
                translateX: 12,
                rotate: '-10deg',
            },
        }}
        delay={delay}
        duration={duration}
        direction="alternate"
        easing="ease-in-out"
        iterationCount="infinite"
        useNativeDriver>
        {children}
    </Animatable.View>
}
複製程式碼

主要用到的動畫，動畫是可以相互巢狀的

range(count).map((i) =>(
    <FailAnimation
        key={i}
        startY={startY}
        speed={speed}
        style={{
            position: "absolute",
            left: Math.random() * this.state.parentWidth
        }}
        duration={duration}
        delay={i * (duration / count)}
    >

        <SwingAnimation
            delay={Math.random() * duration }
            duration={duration}
            >
            {this._imgRandom(imgs)}
        </SwingAnimation>
    </FailAnimation>
))
複製程式碼

通過外部傳屬性imgs圖片陣列

<Rain
    imgs={imgs}
    count={35}
    duration={1500}>
</Rain>
複製程式碼

原始碼github地址 github.com/taixiang/re…

這個github地址裡後續會記錄平時學習工作中用到的rn方面的知識點，這會是一個長期的過程，我自己也會堅持下去。

歡迎關注我的個人部落格：www.manjiexiang.cn/

更多精彩歡迎關注微訊號：春風十里不如認識你
一起學習，一起進步，歡迎上車，有問題隨時聯絡，一起解決！！！