小程序開發animation,調用來描述動畫

2017-12-12

導讀：動畫實例可以調用以下方法來描述動畫，調用結束后會返回自身，支持鏈式調用的寫法。 animation 對象的方法列表：樣式：方法參數說明 opacity value 透明度，參數范圍 0~1 backgroundCol...

動畫實例可以調用以下方法來描述動畫，調用結束后會返回自身，支持鏈式調用的寫法。

animation 對象的方法列表：

樣式：

方法	參數	說明
opacity	value	透明度，參數范圍 0~1
backgroundColor	color	顏色值
width	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
height	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
top	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
left	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
bottom	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
right	length	長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值

旋轉：

方法	參數	說明
rotate	deg	deg的范圍-180~180，從原點順時針旋轉一個deg角度
rotateX	deg	deg的范圍-180~180，在X軸旋轉一個deg角度
rotateY	deg	deg的范圍-180~180，在Y軸旋轉一個deg角度
rotateZ	deg	deg的范圍-180~180，在Z軸旋轉一個deg角度
rotate3d	(x,y,z,deg)	同transform-function rotate3d

縮放：

方法	參數	說明
scale	sx,[sy]	一個參數時，表示在X軸、Y軸同時縮放sx倍數；兩個參數時表示在X軸縮放sx倍數，在Y軸縮放sy倍數
scaleX	sx	在X軸縮放sx倍數
scaleY	sy	在Y軸縮放sy倍數
scaleZ	sz	在Z軸縮放sy倍數
scale3d	(sx,sy,sz)	在X軸縮放sx倍數，在Y軸縮放sy倍數，在Z軸縮放sz倍數

偏移：

方法	參數	說明
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

傾斜：

方法	參數	說明
skew	ax,[ay]	參數范圍-180~180；一個參數時，Y軸坐標不變，X軸坐標延順時針傾斜ax度；兩個參數時，分別在X軸傾斜ax度，在Y軸傾斜ay度
skewX	ax	參數范圍-180~180；Y軸坐標不變，X軸坐標延順時針傾斜ax度
skewY	ay	參數范圍-180~180；X軸坐標不變，Y軸坐標延順時針傾斜ay度

矩陣變形：

方法	參數	說明
matrix	(a,b,c,d,tx,ty)	同transform-function matrix
matrix3d		同transform-function matrix3d

調用動畫操作方法后要調用 step() 來表示一組動畫完成，可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。step 可以傳入一個跟 wx.createAnimation() 一樣的配置參數用于指定當前組動畫的配置。

示例：

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

更多微信小程序開發教程，關注hi小程序。

第二部分：如何開通一個小商店

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频