詳解微信小程序動畫Animation執(zhí)行過程

更新時間：2020年09月23日 16:09:11 作者：王佳斌

這篇文章主要介紹了微信小程序動畫Animation執(zhí)行過程 / 實現(xiàn)過程 / 實現(xiàn)方式，本文給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

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

實現(xiàn)過程

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

簡單來說，整個動畫實現(xiàn)過程就三步：

創(chuàng)建一個動畫實例 animation。
調(diào)用實例的方法來描述動畫。
最后通過動畫實例的 export 方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的 animation 屬性。

在這里插入圖片描述

前兩步是定義一個動畫并設(shè)置都要干什么，然后把這個設(shè)置好的 “規(guī)則” 扔給界面上的某個元素，讓它按照這個規(guī)則執(zhí)行。

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

實現(xiàn)過程

上面是理論，接下來進入實操環(huán)節(jié)，我們通過一個例子來驗證。

在這里插入圖片描述

index.wxml

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

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

index.js

Page({

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

 /*
 * 事件處理
 */
 go: function() {
 
 // 1.創(chuàng)建動畫實例(animation)
 var animation = wx.createAnimation({
  duration: 1500,//動畫持續(xù)時間
  timingFunction: 'ease-in',//動畫以低速開始
  //具體配置項請查看文檔
 })

 // 2.通過實例描述對象()
 /*
 * 鏈式(類似JQuery)
 * 用 . 拼接動畫
 * 最后step()結(jié)尾表動畫結(jié)束
 */
 animation.translate(100, 100).rotate(180).rotate(360).step()

 // 3.導(dǎo)出動畫
 this.setData({
  ani: animation.export()
 })
 }
})

index.css

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

總結(jié)

到此這篇關(guān)于微信小程序動畫Animation執(zhí)行過程 / 實現(xiàn)過程 / 實現(xiàn)方式詳解的文章就介紹到這了,更多相關(guān)微信小程序動畫Animation內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: