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 = {};