微信小程序animation有趣的自定義動(dòng)畫

這幾天在看代碼時(shí)遇到了一些問題:關(guān)于微信小程序的animation自定義動(dòng)畫自己沒有系統(tǒng)的學(xué)習(xí)過

做動(dòng)畫需要我們將一個(gè)復(fù)雜的動(dòng)作過程,拆解為一步一步的小節(jié)過程

微信中已經(jīng)為我們寫好了端口我們只需要實(shí)例化一個(gè)動(dòng)畫實(shí)例(實(shí)例代碼如下)


先了解基礎(chǔ)部分:

在看代碼之前要先有個(gè)下面的基礎(chǔ)了解

1)wx.createAnimation(object) 微信小程序?qū)嵗粋€(gè)動(dòng)畫效果

2)export( ) 這個(gè)方法是導(dǎo)出動(dòng)畫數(shù)據(jù)(傳遞給animation屬性)

3)step( )?來表示一組動(dòng)畫完成


微信官網(wǎng)主要屬性設(shè)置:

這里主要樹下timingFunction和transformOrigin

timingFunction 設(shè)置動(dòng)畫效果

linear 默認(rèn)為linear 動(dòng)畫一直較為均勻

ease 開始時(shí)緩慢中間加速到快結(jié)束時(shí)減速

ease-in 開始的時(shí)候緩慢

ease-in-out 開始和結(jié)束時(shí)減速

ease-out 結(jié)束時(shí)減速

step-start 動(dòng)畫一開始就跳到 100% 直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過

step-end 保持 0% 的樣式直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過

transformOrigin 設(shè)置動(dòng)畫的基點(diǎn) 默認(rèn)%50 %50 0

left,center right是水平方向取值,對(duì)應(yīng)的百分值為left=0%;center=50%;right=100%

top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%


動(dòng)畫組及動(dòng)畫方法:

樣式:

旋轉(zhuǎn):

縮放:

偏移:

傾斜:

矩形變形:

官方是這樣介紹的:

 1.創(chuàng)建一個(gè)動(dòng)畫實(shí)例animation。調(diào)用實(shí)例的方法來描述動(dòng)畫。最后通過動(dòng)畫實(shí)例的export方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的animation屬性。

  這一步是基礎(chǔ):

  1)創(chuàng)建一個(gè)animation實(shí)例

  2) 調(diào)用實(shí)例化的方法描述動(dòng)畫

  3)最后通過動(dòng)畫實(shí)例的export( )方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給{{animation}}

 2.調(diào)用動(dòng)畫操作方法后要調(diào)用 step( ) 來表示一組動(dòng)畫完成,可以在一組動(dòng)畫中調(diào)用任意多個(gè)動(dòng)畫方法,一組動(dòng)畫中的所有動(dòng)畫會(huì)同時(shí)開始,一組動(dòng)畫完成后才會(huì)進(jìn)行下一組動(dòng)畫。step 可以傳入一個(gè)跟 wx.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫的屬性

下面是代碼實(shí)例:

  HTML



  JS

下面是多個(gè)動(dòng)畫效果連續(xù)執(zhí)行的效果(有文字描述動(dòng)畫效果)

轉(zhuǎn)載:https://www.cnblogs.com/Webzhoushifa/p/9509997.html



動(dòng)畫效果:


html

js


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容