微信小程序?qū)崿F(xiàn)animation動畫
微信小程序?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ù)用于指定當(dāng)前組動畫的配置。 通過事件綁定動畫即可調(diào)用動畫執(zhí)行。
創(chuàng)建的動畫實例可以通過調(diào)用動畫方法進行描述,調(diào)用結(jié)束后會返回自身,支持鏈?zhǔn)秸{(diào)用的寫法。
在同一個動畫實例內(nèi)部,可以定義多種運動形式,并定義多個動畫綁定到不同標(biāo)簽
示例代碼:
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)標(biāo)簽
示例代碼
<view animation="{{animation1}}"></view> <view animation="{{animation2}}"></view>
2.2 觸發(fā)動畫
通過頁面事件調(diào)用動畫執(zhí)行
示例代碼:
<view bindtap="touch"></view>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中遞歸實現(xiàn)的方法及其區(qū)別
遞歸函數(shù)是在通過名字調(diào)用自身的情況下構(gòu)成的。下面通過本文給大家分享JavaScript中遞歸實現(xiàn)的方法及其區(qū)別,感興趣的朋友一起看看吧2017-09-09JavaScript獲取地址欄參數(shù)的方法實現(xiàn)
這篇文章主要給大家介紹了關(guān)于JavaScript獲取地址欄參數(shù)的方法實現(xiàn),項目中經(jīng)常遇到獲取上個頁面跳轉(zhuǎn)過來獲取當(dāng)前的參數(shù),文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07一步一步封裝自己的HtmlHelper組件BootstrapHelper(三)
一步一步封裝自己的HtmlHelper組件:BootstrapHelper,系列文章第三篇,感興趣的小伙伴們可以參考一下2016-09-09使用do...while的方法輸入一個月中所有的周日(實例代碼)
下面小編就為大家?guī)硪黄褂胐o...while的方法輸入一個月中所有的周日(實例代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07JavaScript在IE和Firefox瀏覽器下的7個差異兼容寫法小結(jié)
盡管那需要用長串的、沉悶的不同分支代碼來應(yīng)付不同瀏覽器的日子已經(jīng)過去,偶爾還是有必要做一些簡單的區(qū)分和目標(biāo)檢測來確保某塊代碼能在用戶的機器上正常運行。2010-06-06