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地址 https://github.com/taixiang/reactNativeDemo

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

歡迎關注個人我的博客：https://www.manjiexiang.cn/

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