詳解微信小程式動畫Animation執行過程

2020-09-24 06:00:38

前言

因官方檔案描述不清晰，本文主要介紹微信小程式動畫 實現過程 / 實現方式。

實現過程

推薦你對照官方檔案來看本文章，這樣更有利於理解。

簡單來說，整個動畫實現過程就三步：

建立一個動畫範例 animation。
呼叫範例的方法來描述動畫。
最後通過動畫範例的 export 方法匯出動畫資料傳遞給元件的 animation 屬性。

前兩步是定義一個動畫並設定都要幹什麼，然後把這個設定好的「規則」扔給介面上的某個元素，讓它按照這個規則執行。

當然如果有多個元素的 animation="{{ani}}"，也都會執行這個動畫規則。

實現過程

上面是理論，接下來進入實操環節，我們通過一個例子來驗證。

index.wxml

<!-- 動畫容器(執行動畫) -->
<view animation="{{ ani }}" class="content"></view>
<!-- END -->

<!-- 觸發按鈕 -->
<button bindtap="go">動起來</button>
<!-- END -->

index.js

Page({

 /*
 * 事件處理
 */
 data: {},

 /*
 * 事件處理
 */
 go: function() {
 
 // 1.建立動畫範例(animation)
 var animation = wx.createAnimation({
  duration: 1500,//動畫持續時間
  timingFunction: 'ease-in',//動畫以低速開始
  //具體設定項請檢視檔案
 })

 // 2.通過範例描述物件()
 /*
 * 鏈式(類似JQuery)
 * 用 . 拼接動畫
 * 最後step()結尾表動畫結束
 */
 animation.translate(100, 100).rotate(180).rotate(360).step()

 // 3.匯出動畫
 this.setData({
  ani: animation.export()
 })
 }
})

index.css

.content {/*為了能看清效果*/
 width: 200rpx;
 height: 200rpx;
 border: 3px solid red;
}

總結

到此這篇關於微信小程式動畫Animation執行過程 / 實現過程 / 實現方式詳解的文章就介紹到這了,更多相關微信小程式動畫Animation內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

詳解微信小程式動畫Animation執行過程

熱門文章