前言
因官方文檔描述不清晰，本文主要介紹微信小程序動畫 實現過程 / 實現方式。
實現過程
推薦你對照 官方文檔 來看本文章，這樣更有利于理解。
簡單來說，整個動畫實現過程就三步：
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內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
