登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

查看: 108|回复: 0

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

[复制链接]

56

主题

73

帖子

488

安币

攻城狮

Rank: 3Rank: 3

QQ
发表于 2019-4-14 21:15:01 | 显示全部楼层 |阅读模式
如果对本篇文章感兴趣,请前往,原文地址:http://www.apkbus.com/blog-691662-79868.html

日常项目中,经常遇到一些表情雨/金币雨/彩带雨 等下落的动画,之前做android原生的时候,写过类似的效果,主要通过自定义view 在`onDraw`里绘制下落的过程,具体可以看下我的这篇github地址[android 仿微信表情雨下落](https://github.com/taixiang/rain_emoji),现在转战 `react-native`,同样可以实现这样的效果,主要用到的动画库 [react-native-animatable](https://github.com/oblador/react-native-animatable)    ![](https://user-gold-cdn.xitu.io/2019/4/14/16a1ae038906ec02?w=306&h=500&f=jpeg&s=24631)  安装 `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](https://github.com/taixiang/reactNativeDemo)      这个github地址里后续会记录平时学习工作中用到的rn方面的知识点,这会是一个长期的过程,我自己也会坚持下去。      欢迎关注我的个人博客:[https://www.manjiexiang.cn/](https://www.manjiexiang.cn/)  更多精彩欢迎关注微信号:春风十里不如认识你  一起学习,一起进步,欢迎上车,有问题随时联系,一起解决!!!![](https://user-gold-cdn.xitu.io/2018/8/12/1652cd77eaebeb98?w=900&h=540&f=jpeg&s=64949)  继续阅读全文



想在安卓巴士找到更多优质博文,可移步博客区

如果对本篇文章感兴趣,请前往,
原文地址:
http://www.apkbus.com/blog-691662-79868.html
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表