快捷導(dǎo)航

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

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

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

前言

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

實(shí)現(xiàn)過(guò)程

推薦你對(duì)照官方文檔來(lái)看本文章，這樣更有利于理解。

簡(jiǎn)單來(lái)說(shuō)，整個(gè)動(dòng)畫實(shí)現(xiàn)過(guò)程就三步：

創(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 屬性。

在這里插入圖片描述

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

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

實(shí)現(xiàn)過(guò)程

上面是理論，接下來(lái)進(jìn)入實(shí)操環(huán)節(jié)，我們通過(guò)一個(gè)例子來(lái)驗(yàn)證。

在這里插入圖片描述

index.wxml

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

<!-- 觸發(fā)按鈕 -->
<button bindtap="go">動(dòng)起來(lái)</button>
<!-- END -->

index.js

Page({

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

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

 // 2.通過(guò)實(shí)例描述對(duì)象()
 /*
 * 鏈?zhǔn)?類似JQuery)
 * 用 . 拼接動(dòng)畫
 * 最后step()結(jié)尾表動(dòng)畫結(jié)束
 */
 animation.translate(100, 100).rotate(180).rotate(360).step()

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

index.css

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

總結(jié)

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

您可能感興趣的文章: