uni-app动画效果

1.在需要进行动画的元素绑定  :animation="animationData"

<view class="selectpop-content" :animation="animationData">
</view>

 

2.data 中定义

animationData: {},//盒子动效

 

3.onload中创建

this.animation = uni.createAnimation();//创建动画  

 

4.对应属性  更多属性 https://uniapp.dcloud.io/api/ui/animation?id=createanimation

translate	tx,[ty]	一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。
translateX	tx	在X轴偏移tx，单位px
translateY	ty	在Y轴偏移tx，单位px
translateZ	tz	在Z轴偏移tx，单位px
translate3d	(tx,ty,tz)	在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px

 

5.让元素进行动画

设置动画

this.animation.translate(-75,-200).step({duration:300});

运行动画

this.animationData = this.animation.export();

.step()是动画多久完成

 

6.关闭页面时清除动画

this.animationData = {};