微信小程式動畫animation

二、動畫

注意獲取元素節點方法為非同步呼叫，因此使用promise，確保節點獲取到值後再返回獲取的width寬度。

//  引數：select -> 想要獲取的節點的類名，使用： getrect(".classname") 
getrect
(select)})
.exec()
;})}
,

工具函式寫完後，呼叫獲取元素屬性，注意生命週期函式使用ready而非 create 。另外，前面提到獲取元素屬性的函式是非同步的，因此使用了promise，因此在這個步驟使用 promise.all() 獲取得到的全部資料並賦值給data中的資料。

ready()
)... 邏輯 ....}
)}

（1）使用 wx.createanimation() 函式建立乙個動畫物件，內含四個引數（引數不細說，詳情參考官方api）。

官方api：

（2）在建立後的動畫物件上執行操作，例子中是比較簡單的平行移動，注意，在每乙個動畫結束後用.step()函式，根據這一特性，可有多個動畫，如：

animation.translatex(50).step().translatex(-50).step();

// 動畫邏輯函式
scroll
(duration,timingfunction,delay));
animation.
translatex(50
).step()
;// 移動
this
.setdata()
;},

在實際運用中，我們往往不止是讓動畫動起來，有時可能還需要監聽動畫的狀態，來進行不同時期的邏輯操作。

動畫狀態官方api：

此處貼上繫結動畫此刻狀態的函式，如下所示:

//  page頁面標籤  繫結監聽
class
="wrap"
>
class
="text"
animation
="}"
bindtransitionend
="transitionend"
---動畫結束
bindanimationstart
="animationstart"
---動畫開始
bindanimationiteration
="animationiteration"
---動畫進行中
>
}view
>
view
>

下面是js中對應的方法：

// index.js函式中的監聽方法
methods:
,animationstart()
,animationiteration()
,}

transitionend()
,20);
},

關於這部分**中心想法：

因為迴圈在我看來就是動畫結束之後再進行一遍剛剛的動作，因此我將迴圈的邏輯放在了每乙個動畫的結尾，上面提到監聽動畫結束的函式作用就在此，在每乙個動畫結束後，對元素進行復位操作，將其恢復到初始的狀態，再重新執行動畫。

注意：這裡scroll函式外必須有延時函式，延時時間也不能過短，否則迴圈不生效。

微信小程式動畫animation

微信小程式動畫

微信小程式js過度動畫

微信小程式底部彈窗動畫

微信小程式 動畫animation

微信小程式動畫

微信小程式js過度動畫

微信小程式底部彈窗動畫

相關推薦

微信小程式動畫animation