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

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

react-native 金币彩带雨下落动画_第1张图片

安装 yarn add react-native-animatable

主要用到的动画是移动下落,即translateY,从屏幕顶部下落至底部,同时过程中可以左右摇摆,每次随机图片下落。

_FailAnimation = ({style,duration,delay,startY,speed,children}) => {
    return  Math.pow(t, 1.2)}
        useNativeDriver>
        {children}
    
}

_SwingAnimation = ({delay, duration, children}) => {
    return 
        {children}
    
}

主要用到的动画,动画是可以相互嵌套的

range(count).map((i) =>(
    

        
            {this._imgRandom(imgs)}
        
    
))

通过外部传属性imgs图片数组



源代码github地址 https://github.com/taixiang/reactNativeDemo

这个github地址里后续会记录平时学习工作中用到的rn方面的知识点,这会是一个长期的过程,我自己也会坚持下去。

欢迎关注我的个人博客:https://www.manjiexiang.cn/

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

react-native 金币彩带雨下落动画_第2张图片

你可能感兴趣的:(react-native 金币彩带雨下落动画)