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/

更多精彩欢迎关注微信号：春风十里不如认识你
一块儿学习，一块儿进步，欢迎上车，有问题随时联系，一块儿解决！！！