view plaincopyviewclass="view_a"imageanimation="{{animation}}"class="a_img"src="http://img.blog.csdn.net/20170614190537974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fonts ...

二. 小程序動(dòng)畫 Animation API
創(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
})
動(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 |
調(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)畫的配置。