react-native 金币彩带雨下落动画
程序员文章站
2022-07-05 15:09:14
日常项目中,经常遇到一些表情雨/金币雨/彩带雨 等下落的动画,之前做android原生的时候,写过类似的效果,主要通过自定义view 在 里绘制下落的过程,具体可以看下我的这篇github地址 "android 仿微信表情雨下落" ,现在转战 ,同样可以实现这样的效果,主要用到的动画库 "react ......
日常项目中,经常遇到一些表情雨/金币雨/彩带雨 等下落的动画,之前做android原生的时候,写过类似的效果,主要通过自定义view 在ondraw
里绘制下落的过程,具体可以看下我的这篇github地址,现在转战 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方面的知识点,这会是一个长期的过程,我自己也会坚持下去。
欢迎关注我的个人博客:
更多精彩欢迎关注微信号:春风十里不如认识你
一起学习,一起进步,欢迎上车,有问题随时联系,一起解决!!!