注冊(cè)

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

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

動(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 長度值,如果傳入 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)順時(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)畫的配置。

示例:

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

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

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)