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/
更多精彩欢迎关注微信号:春风十里不如认识你
一起学习,一起进步,欢迎上车,有问题随时联系,一起解决!!!
react-native 金币彩带雨下落动画的更多相关文章
- React Native填坑之旅--动画
动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个 ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native 在 Airbnb(译文)
在Android,iOS,Web和跨平台框架的横向对比中,React Native本身是一个相对较新且快速开发移动的平台.两年后,我们可以肯定地说React Native在很多方面都是革命性的.这是移 ...
- React Native简史
诞生 React Native 诞生于 2013 年的 Facebook 内部黑客马拉松(hackathon): In the essence of Facebook’s hacker culture ...
- Flutter vs React Native vs Native:深度性能比较
老孟导读:这是老孟翻译的付费文章,文章所有权归原作者所有. 欢迎加入老孟Flutter交流群,每周翻译2-3篇付费文章,精彩不容错过. 原文地址:https://medium.com/swlh/flu ...
- React Native动画总结
最近在使用react native进行App混合开发,相对于H5的开发,RN所提供的样式表较少,RN中不能使用类似于css3中的动画,因此,RN提供了Animated的API 1.写一个最简单的动画 ...
- 【React Native】进阶指南之一(特定平台、图片加载、动画使用)
一.特定平台代码 React Native提供了两种方法来区分平台: 使用Platform模块: 使用特定平台扩展名: 1.Platform模块 React Native提供了一个检测当前运行平台的模 ...
- [RN] React Native 下拉放大动画
React Native 下拉放大动画 经测试,无法运行 https://www.jianshu.com/p/1c960ad75020
- React Native超棒的LayoutAnimation(布局动画)
该文翻译自:https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e#.6 ...
随机推荐
- js基础进阶--关于Array.prototype.slice.call(arguments) 的思考
欢迎访问我的个人博客:http://www.xiaolongwu.cn Array.prototype.slice.call(arguments)的作用为:强制转化arguments为数组格式,一般出 ...
- MyBatis xml配置文件详解
http://blog.csdn.net/fenghuibian/article/details/52525671
- 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
报错: 解决:在语句开头指定SET NOCOUNT ON 就是这么神cao奇dan. -END-
- Oracle12c中功能及性能新特点之with子句的增强
1. 设置创建测试表.DROP TABLE test PURGE; CREATE TABLE test ASSELECT 1 AS idFROM dualCONNECT BY level < ...
- 2101: Bake Off
Description Davy decided to start a weekend market stall where he sells his famous cakes. For the fi ...
- 玩转spring MVC(八)----spring MVC整合json
这篇文章在前边项目的基础上来整合json,最新项目资料见:http://download.csdn.net/detail/u012116457/8436187 首先需要的jar包:jackson-co ...
- Connection reset by peer的常见原因
1,如果一端的Socket被关闭(或主动关闭,或因为异常退出而 引起的关闭),另一端仍发送数据,发送的第一个数据包引发该异常(Connect reset by peer). Socket默认连接60秒 ...
- Python List 删除元素
1. 使用del删除指定元素 li = [1, 2, 3, 4] del li[3] print(li) # Output [1, 2, 3] 2. 使用list方法pop删除元素 li = [1, ...
- [爬虫]Windows下如何安装python第三方库lxml
lxml是个非常有用的python库,它可以灵活高效地解析xml与BeautifulSoup.requests结合,是编写爬虫的标准姿势. 但是,当lxml遇上Windows,简直是个巨坑.掉在安装陷 ...
- mock打桩之EasyMock
TDD是测试驱动开发(Test-Driven Development)的英文简称,是敏捷开发中的一项核心实践和技术,也是一种设计方法论.TDD的原理是在开发功能代码之前,先编写单元测试用例代码,测试代 ...