微信小程序?qū)崿F(xiàn)animation動(dòng)畫(huà)

第微信小程序?qū)崿F(xiàn)animation動(dòng)畫(huà)創(chuàng)建一個(gè)動(dòng)畫(huà)實(shí)例animation。調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫(huà)。最后通過(guò)動(dòng)畫(huà)實(shí)例的export方法導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)傳遞給組件的animation屬性。

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

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

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

創(chuàng)建的動(dòng)畫(huà)實(shí)例可以通過(guò)調(diào)用動(dòng)畫(huà)方法進(jìn)行描述，調(diào)用結(jié)束后會(huì)返回自身，支持鏈?zhǔn)秸{(diào)用的寫(xiě)法。

在同一個(gè)動(dòng)畫(huà)實(shí)例內(nèi)部，可以定義多種運(yùn)動(dòng)形式，并定義多個(gè)動(dòng)畫(huà)綁定到不同標(biāo)簽

示例代碼：

animation1:{}

animation2:{}

touch:function(){

letanimation1=wx.createAnimation({

transformOrigin:"50%50%",

duration:1000,

timingFunction:"ease",

delay:0

animation1.translateX(-app.globalData.windowWidth*0.7).step({duration:1000});

this.setData({

animation1:animation1.export()

letanimation2=wx.createAnimation({

transformOrigin:"50%50%",

duration:1000,

timingFunction:"ease",

delay:0

animation2.opacity(0.7).step({duration:1000});

this.setData({

animation2:animation2.export()

2.調(diào)用動(dòng)畫(huà)執(zhí)行

2.1綁定動(dòng)畫(huà)

將所創(chuàng)建的動(dòng)畫(huà)實(shí)例綁定到相應(yīng)標(biāo)簽

示例代碼

viewanimation="{{animation1}}"/view

viewanimation="{{animation2}}"/view

2.2觸發(fā)動(dòng)畫(huà)

通過(guò)頁(yè)面事件調(diào)用動(dòng)畫(huà)執(zhí)行

示例代碼：

viewb