Daily projects, often encountered some expression rain/gold rain/ribbon rain and other falling animation, before doing android native, wrote a similar effect, mainly through the custom view in onDraw to draw the process of falling, specific can see my github address Android imitation wechat expression rain falling, The same can now be done with The react-Native animation library, React-Native Animatable

Install the YARN Add React-Native Animatable library

The main animation used is the moving drop, i.e. the translateY, which falls from the top of the screen to the bottom, and can swing left and right during the process, every time the random image falls.

_FailAnimation = ({style,duration,delay,startY,speed,children}) => {
    return< animatable. View // Drop animation style={style} duration={duration} delay={delay} animation={{from: {translateY: startY}, to: {translateY: this.state.parentHeight + speed} }} easing={t => Math.pow(t, } useNativeDriver> {children} </ animatable. View>} _SwingAnimation = ({delay, duration, children}) => {return<Animatable.View animation={{0: {translateX: -12, rotate:'10deg'}, 0.5: {translateX: 0, rotate: 0'0deg',
            },
            1: {
                translateX: 12,
                rotate: '-10deg',
            },
        }}
        delay={delay}
        duration={duration}
        direction="alternate"
        easing="ease-in-out"
        iterationCount="infinite"
        useNativeDriver>
        {children}
    </Animatable.View>
}
Copy the code

Main use of animation, animation can be nested with each other

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>
))
Copy the code

Pass the property imGS image array externally

<Rain
    imgs={imgs}
    count={35}
    duration={1500}>
</Rain>
Copy the code

Source code Github address github.com/taixiang/re…

This Github address will record the knowledge points about RN used in daily study and work. It will be a long-term process, and I will stick to it.

Welcome to my personal blog: www.manjiexiang.cn/

More wonderful welcome to pay attention to micro signal: spring breeze ten miles is better to know you to learn together, progress together, welcome to get on the car, have a problem at any time contact, solve together!!