二. 小程序動(dòng)畫 Animation API

wx.createAnimation(OBJECT)

創(chuàng)建一個(gè)動(dòng)畫實(shí)例animation。調(diào)用實(shí)例的方法來描述動(dòng)畫。最后通過動(dòng)畫實(shí)例的export方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的animation屬性。

注意: export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作 

OBJECT參數(shù)說明：

參數(shù)	類型	必填	默認(rèn)值	說明
duration	Integer	否	400	動(dòng)畫持續(xù)時(shí)間，單位ms
timingFunction	String	否	"linear"	定義動(dòng)畫的效果
delay	Integer	否	0	動(dòng)畫延遲時(shí)間，單位 ms
transformOrigin	String	否	"50% 50% 0"	設(shè)置transform-origin

timingFunction 有效值：

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

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

animation

動(dòng)畫實(shí)例可以調(diào)用以下方法來描述動(dòng)畫，調(diào)用結(jié)束后會(huì)返回自身，支持鏈?zhǔn)秸{(diào)用的寫法。

animation 對(duì)象的方法列表：

樣式：

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

旋轉(zhuǎn)：

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

縮放：

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

偏移：

方法	參數(shù)	說明
translate	tx,[ty]	一個(gè)參數(shù)時(shí)，表示在X軸偏移tx，單位px；兩個(gè)參數(shù)時(shí)，表示在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

傾斜：

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

矩陣變形：

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

動(dòng)畫隊(duì)列

調(diào)用動(dòng)畫操作方法后要調(diào)用 step() 來表示一組動(dòng)畫完成，可以在一組動(dòng)畫中調(diào)用任意多個(gè)動(dòng)畫方法，一組動(dòng)畫中的所有動(dòng)畫會(huì)同時(shí)開始，一組動(dòng)畫完成后才會(huì)進(jìn)行下一組動(dòng)畫。step 可以傳入一個(gè)跟 wx.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫的配置。