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