wx.createAnimation(OBJECT),小程序創(chuàng)建一個動畫實例animation
2017-12-12
導(dǎo)讀:創(chuàng)建一個動畫實例 animation 。調(diào)用實例的方法來描述動畫。最后通過動畫實例的 export 方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的 animation 屬性。 注意: export 方法每次調(diào)用后會清掉之前的動畫操作...
創(chuàng)建一個動畫實例animation。調(diào)用實例的方法來描述動畫。最后通過動畫實例的export
方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的animation
屬性。
注意: export
方法每次調(diào)用后會清掉之前的動畫操作
OBJECT參數(shù)說明:
參數(shù) | 類型 | 必填 | 默認值 | 說明 |
---|---|---|---|---|
duration | Integer | 否 | 400 | 動畫持續(xù)時間,單位ms |
timingFunction | String | 否 | "linear" | 定義動畫的效果 |
delay | Integer | 否 | 0 | 動畫延遲時間,單位 ms |
transformOrigin | String | 否 | "50% 50% 0" | 設(shè)置transform-origin |
timingFunction 有效值:
值 | 說明 |
---|---|
linear | 動畫從頭到尾的速度是相同的 |
ease | 動畫以低速開始,然后加快,在結(jié)束前變慢 |
ease-in | 動畫以低速開始 |
ease-in-out | 動畫以低速開始和結(jié)束 |
ease-out | 動畫以低速結(jié)束 |
step-start | 動畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束 |
step-end | 動畫一直保持開始狀態(tài),最后一幀跳到結(jié)束狀態(tài) |
var animation = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
更多微信小程序開發(fā)教程,關(guān)注hi小程序。
第二部分:如何開通一個小商店