微信小程序?qū)崿F(xiàn)animation動畫
微信小程序?qū)崿F(xiàn)animation動畫，具體內(nèi)容如下
1. 創(chuàng)建動畫實例
wx.createAnimation(OBJECT)
創(chuàng)建一個動畫實例animation。調(diào)用實例的方法來描述動畫。最后通過動畫實例的export方法導出動畫數(shù)據(jù)傳遞給組件的animation屬性。
注意: export 方法每次調(diào)用后會清掉之前的動畫操作
動畫隊列
調(diào)用動畫操作方法后要調(diào)用 step() 來表示一組動畫完成，可以在一組動畫中調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。step 可以傳入一個跟 wx.createAnimation() 一樣的配置參數(shù)用于指定當前組動畫的配置。 通過事件綁定動畫即可調(diào)用動畫執(zhí)行。
創(chuàng)建的動畫實例可以通過調(diào)用動畫方法進行描述，調(diào)用結束后會返回自身，支持鏈式調(diào)用的寫法。
在同一個動畫實例內(nèi)部，可以定義多種運動形式，并定義多個動畫綁定到不同標簽
示例代碼：
animation1: {}
animation2: {}
touch: function () {
let animation1 = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
});
animation1.translateX(-app.globalData.windowWidth * 0.7).step({ duration: 1000 });
this.setData({
animation1: animation1.export()
});
let animation2 = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
});
animation2.opacity(0.7).step({ duration: 1000 });
this.setData({
animation2: animation2.export()
});
}
2. 調(diào)用動畫執(zhí)行
2.1 綁定動畫
將所創(chuàng)建的動畫實例綁定到相應標簽
示例代碼
<view animation="{{animation1}}"></view>
<view animation="{{animation2}}"></view>
2.2 觸發(fā)動畫
通過頁面事件調(diào)用動畫執(zhí)行
示例代碼：
<view bindtap="touch"></view>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
最近在做項目的時候,遇到了有四舍五入保留兩位的需求,當時不假思索的直接使用了js原生的toFixed方法,結果出現(xiàn)了問題,這篇文章主要給大家介紹了關于JS中toFixed()方法四舍五入精度問題的相關資料,需要的朋友可以參考下2021-10-10
chrome的drag and drop API，它能將本地的圖片放到瀏覽器中進行預覽，猜想一下當我們把圖片拖拽到瀏覽器里會發(fā)生什么事情，你的瀏覽器試圖打開一個新的頁面并加載這個圖片。這篇文章給我們介紹drag-and-drop實現(xiàn)圖片瀏覽器預覽，需要的朋友可以參考下2015-08-08
layui 上傳插件 帶預覽 非自動上傳功能的實例(非常實用)
今天小編就為大家分享一篇layui 上傳插件 帶預覽 非自動上傳功能的實例(非常實用)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript DOM節(jié)點操作實例小結(新建,刪除HTML元素)
這篇文章主要介紹了JavaScript DOM節(jié)點操作,結合實例形式總結分析了JS操作DOM實現(xiàn)新建與刪除HTML元素的具體步驟與相關技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JS閉包原理與應用,結合實例形式較為詳細的分析了javascript閉包的原理、應用及相關操作注意事項,需要的朋友可以參考下2018-12-12
jQuery javascript獲得網(wǎng)頁的高度與寬度的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query javascript獲得網(wǎng)頁的高度與寬度的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
這篇文章主要介紹了js實現(xiàn)宇宙星空背景效果的方法,實例分析了javascript中動畫效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
Bootstrap Table從服務器加載數(shù)據(jù)進行顯示的實現(xiàn)方法
Bootstrap-Table是一個Boostrap的表格插件，能夠?qū)SON數(shù)據(jù)直接顯示在表格中。接下來通過本文給大家分享Bootstrap Table從服務器加載數(shù)據(jù)進行顯示的實現(xiàn)方法，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了ES6 十大特性的相關資料，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
Javascript 模擬mvc實現(xiàn)點餐程序案例詳解
這篇文章主要介紹了Javascript 模擬mvc實現(xiàn)點餐程序案例詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12