小程序開發(fā)animation,調(diào)用來描述動畫

2017-12-12

導(dǎo)讀：動畫實(shí)例可以調(diào)用以下方法來描述動畫，調(diào)用結(jié)束后會返回自身，支持鏈?zhǔn)秸{(diào)用的寫法。 animation 對象的方法列表：樣式：方法參數(shù) 說明 opacity value 透明度，參數(shù)范圍 0~1 backgroundCol...

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

animation 對象的方法列表：

樣式：

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

旋轉(zhuǎn)：

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

縮放：

方法	參數(shù)	說明
scale	sx,[sy]	一個參數(shù)時，表示在X軸、Y軸同時縮放sx倍數(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]	一個參數(shù)時，表示在X軸偏移tx，單位px；兩個參數(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；一個參數(shù)時，Y軸坐標(biāo)不變，X軸坐標(biāo)延順時針傾斜ax度；兩個參數(shù)時，分別在X軸傾斜ax度，在Y軸傾斜ay度
skewX	ax	參數(shù)范圍-180~180；Y軸坐標(biāo)不變，X軸坐標(biāo)延順時針傾斜ax度
skewY	ay	參數(shù)范圍-180~180；X軸坐標(biāo)不變，Y軸坐標(biāo)延順時針傾斜ay度

矩陣變形：

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

動畫隊(duì)列

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

示例：

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

更多微信小程序開發(fā)教程，關(guān)注hi小程序。

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

【本站声明】

1、本网站发布的该篇文章，目的在于分享电商知识及传递、交流相关电商信息，以便您学习或了解电商知识，请您不要用于其他用途；
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站，更非本网站提供，与本网站无关，系他人的商品或服务，本网站对于该类商标、标识不拥有任何权利；
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保；
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。