欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

react-native 金币彩带雨下落动画

程序员文章站 2022-07-05 15:09:14
日常项目中,经常遇到一些表情雨/金币雨/彩带雨 等下落的动画,之前做android原生的时候,写过类似的效果,主要通过自定义view 在 里绘制下落的过程,具体可以看下我的这篇github地址 "android 仿微信表情雨下落" ,现在转战 ,同样可以实现这样的效果,主要用到的动画库 "react ......

日常项目中,经常遇到一些表情雨/金币雨/彩带雨 等下落的动画,之前做android原生的时候,写过类似的效果,主要通过自定义view 在ondraw里绘制下落的过程,具体可以看下我的这篇github地址,现在转战 react-native,同样可以实现这样的效果,主要用到的动画库

react-native 金币彩带雨下落动画

安装 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方面的知识点,这会是一个长期的过程,我自己也会坚持下去。

欢迎关注我的个人博客:

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

react-native 金币彩带雨下落动画