wx.createAnimation(OBJECT),小程序創(chuàng)建一個(gè)動(dòng)畫實(shí)例animation
2017-12-12
導(dǎo)讀：創(chuàng)建一個(gè)動(dòng)畫實(shí)例 animation 。調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫。最后通過(guò)動(dòng)畫實(shí)例的 export 方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的 animation 屬性。 注意: export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作...
創(chuàng)建一個(gè)動(dòng)畫實(shí)例animation。調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫。最后通過(guò)動(dòng)畫實(shí)例的export方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的animation屬性。
注意: export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作
OBJECT參數(shù)說(shuō)明：
| 參數(shù) | 類型 | 必填 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|---|
| 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 有效值：
| 值 | 說(shuō)明 |
|---|---|
| linear | 動(dòng)畫從頭到尾的速度是相同的 |
| ease | 動(dòng)畫以低速開(kāi)始，然后加快，在結(jié)束前變慢 |
| ease-in | 動(dòng)畫以低速開(kāi)始 |
| ease-in-out | 動(dòng)畫以低速開(kāi)始和結(jié)束 |
| ease-out | 動(dòng)畫以低速結(jié)束 |
| step-start | 動(dòng)畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束 |
| step-end | 動(dòng)畫一直保持開(kāi)始狀態(tài)，最后一幀跳到結(jié)束狀態(tài) |
var animation = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
更多微信小程序開(kāi)發(fā)教程，關(guān)注hi小程序。
第二部分：如何開(kāi)通一個(gè)小商店
掃碼免費(fèi)領(lǐng)取運(yùn)營(yíng)資料包
