這篇文章將為大家詳細講解有關(guān)微信小程序如何實現(xiàn)animation動畫,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
10年專注成都網(wǎng)站制作,企業(yè)網(wǎng)站設(shè)計,個人網(wǎng)站制作服務(wù),為大家分享網(wǎng)站制作知識、方案,網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站設(shè)計,高端網(wǎng)頁制作,對PVC花箱等多個行業(yè),擁有多年的網(wǎng)站維護經(jīng)驗。
微信小程序?qū)崿F(xiàn)animation動畫,具體內(nèi)容如下
1. 創(chuàng)建動畫實例
wx.createAnimation(OBJECT)
創(chuàng)建一個動畫實例animation。調(diào)用實例的方法來描述動畫。最后通過動畫實例的export方法導(dǎo)出動畫數(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)用結(jié)束后會返回自身,支持鏈式調(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)建的動畫實例綁定到相應(yīng)標簽
示例代碼
<view animation="{{animation1}}"></view> <view animation="{{animation2}}"></view>
2.2 觸發(fā)動畫
通過頁面事件調(diào)用動畫執(zhí)行
示例代碼:
<view bindtap="touch"></view>
關(guān)于“微信小程序如何實現(xiàn)animation動畫”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
新聞標題:微信小程序如何實現(xiàn)animation動畫
當前地址:http://bm7419.com/article46/jjeseg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、動態(tài)網(wǎng)站、搜索引擎優(yōu)化、營銷型網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)站維護
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)