二. 小程序動(dong)畫 Animation API

wx.createAnimation(OBJECT)

創建一個動畫實例animation。調用實例的方法來描述動畫。最后通過動畫實例的export方法導出動畫數據傳遞給組件的animation屬性。

注意: export 方(fang)法每(mei)次調用后會清掉之(zhi)前(qian)的(de)動畫操作 

OBJECT參數(shu)說明：

參數	類型	必填	默認值	說明
duration	Integer	否	400	動畫持續時間，單位ms
timingFunction	String	否	"linear"	定義動畫的效果
delay	Integer	否	0	動畫延遲時間，單位 ms
transformOrigin	String	否	"50% 50% 0"	設置transform-origin

timingFunction 有效(xiao)值：

值	說明
linear	動畫從頭到尾的速度是相同的
ease	動畫以低速開始，然后加快，在結束前變慢
ease-in	動畫以低速開始
ease-in-out	動畫以低速開始和結束
ease-out	動畫以低速結束
step-start	動畫第一幀就跳至結束狀態直到結束
step-end	動畫一直保持開始狀態，最后一幀跳到結束狀態

var animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
})

animation

動畫實例可以(yi)調(diao)用以(yi)下(xia)方法(fa)來描述動畫，調(diao)用結束后會返回自(zi)身，支持(chi)鏈式調(diao)用的寫法(fa)。

animation 對象的方法列表(biao)：

樣式：

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

矩陣變形(xing)：

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

動畫隊列

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