android金币下落动画,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

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}

}

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

return

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}

}

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

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

key={i}

startY={startY}

speed={speed}

style={{

position: "absolute",

left: Math.random() * this.state.parentWidth

}}

duration={duration}

delay={i * (duration / count)}

delay={Math.random() * duration }

duration={duration}

{this._imgRandom(imgs)}

))

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

imgs={imgs}

count={35}

duration={1500}>

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

更多精彩欢迎关注微信号：春风十里不如认识你

一起学习，一起进步，欢迎上车，有问题随时联系，一起解决！！！

android金币下落动画,react-native 金币彩带雨下落动画相关推荐

React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
4、在已有的Android应用中使用React Native
这一篇记录的是如何在已有的Android应用中使用React Native,在官方的文档上也有介绍:http://reactnative.cn/docs/embedded-app-android.ht ...
react-native 金币彩带雨下落动画
日常项目中,经常遇到一些表情雨/金币雨/彩带雨等下落的动画,之前做android原生的时候,写过类似的效果,主要通过自定义view 在onDraw里绘制下落的过程,具体可以看下我的这篇github地 ...
React Native Expo 项目中添加动画音效
目录背景实现代码效果参考链接背景最近做一个学校作业,用 React Native 写一个游戏.游戏中涉及一个物体下落的动效,是用 React Native 的 Animated API ...
android ios 混合编程,React Native与原生（Android、iOS）混编，三端痛点解析
在做RN混编项目的时候或者面试的时候经常会遇到一些问题,总结起来有以下几种: 1.过多的注册RN组件( AppRegistry.registerComponent() ); 2.从原生跳转指定的RN页 ...
Android特效（包含React Native）
在这里提供了一些Android特效,大家可以参考一下, 带有删除按钮的dialog https://www.jianshu.com/p/9259ad7f857bToast封装 https://www. ...
android 网络时区错误,React native 安卓机器上调试代码报错：网络请求出错TypeError: Network request failed...
React native 安卓机器上调试代码报错:网络请求出错TypeError: Network request failed 安卓机器 usb连接调试报错信息 TypeError: Networ ...
android 仿ios tabs,React Native兼容iOS Android的TabBar
tabbar 最近着手开发的一个兼容iOS.Android的TabBar.还在不断开发中. 欢迎fork,欢迎star. :p 自己捣鼓了个E文的readme,没啥难度凑合可看. react-nati ...

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

android金币下落动画,react-native 金币彩带雨下落动画相关推荐

最新文章

热门文章