這幾天在看代碼時(shí)遇到了一些問(wèn)題：關(guān)于微信小程序的animation自定義動(dòng)畫(huà)自己沒(méi)有系統(tǒng)的學(xué)習(xí)過(guò)
做動(dòng)畫(huà)需要我們將一個(gè)復(fù)雜的動(dòng)作過(guò)程佑力，拆解為一步一步的小節(jié)過(guò)程
微信中已經(jīng)為我們寫(xiě)好了端口我們只需要實(shí)例化一個(gè)動(dòng)畫(huà)實(shí)例（實(shí)例代碼如下）
先了解基礎(chǔ)部分：
在看代碼之前要先有個(gè)下面的基礎(chǔ)了解
1）wx.createAnimation(object) 微信小程序?qū)嵗粋€(gè)動(dòng)畫(huà)效果
2）export( ) 這個(gè)方法是導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)（傳遞給animation屬性）
3）step( )?來(lái)表示一組動(dòng)畫(huà)完成
微信官網(wǎng)主要屬性設(shè)置：
這里主要樹(shù)下timingFunction和transformOrigin
timingFunction 設(shè)置動(dòng)畫(huà)效果
linear 默認(rèn)為linear 動(dòng)畫(huà)一直較為均勻
ease 開(kāi)始時(shí)緩慢中間加速到快結(jié)束時(shí)減速
ease-in 開(kāi)始的時(shí)候緩慢
ease-in-out 開(kāi)始和結(jié)束時(shí)減速
ease-out 結(jié)束時(shí)減速
step-start 動(dòng)畫(huà)一開(kāi)始就跳到 100% 直到動(dòng)畫(huà)持續(xù)時(shí)間結(jié)束 一閃而過(guò)
step-end 保持 0% 的樣式直到動(dòng)畫(huà)持續(xù)時(shí)間結(jié)束 一閃而過(guò)
transformOrigin 設(shè)置動(dòng)畫(huà)的基點(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)畫(huà)組及動(dòng)畫(huà)方法：
樣式：
旋轉(zhuǎn)：
縮放：
偏移：
傾斜：
矩形變形：
官方是這樣介紹的：
1.創(chuàng)建一個(gè)動(dòng)畫(huà)實(shí)例animation。調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫(huà)档址。最后通過(guò)動(dòng)畫(huà)實(shí)例的export方法導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)傳遞給組件的animation屬性盹兢。
這一步是基礎(chǔ)：
1）創(chuàng)建一個(gè)animation實(shí)例
2) 調(diào)用實(shí)例化的方法描述動(dòng)畫(huà)
3）最后通過(guò)動(dòng)畫(huà)實(shí)例的export( )方法導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)傳遞給{{animation}}
2.調(diào)用動(dòng)畫(huà)操作方法后要調(diào)用 step( ) 來(lái)表示一組動(dòng)畫(huà)完成，可以在一組動(dòng)畫(huà)中調(diào)用任意多個(gè)動(dòng)畫(huà)方法守伸，一組動(dòng)畫(huà)中的所有動(dòng)畫(huà)會(huì)同時(shí)開(kāi)始绎秒，一組動(dòng)畫(huà)完成后才會(huì)進(jìn)行下一組動(dòng)畫(huà)。step 可以傳入一個(gè)跟 wx.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫(huà)的屬性
下面是代碼實(shí)例：
HTML
JS
下面是多個(gè)動(dòng)畫(huà)效果連續(xù)執(zhí)行的效果（有文字描述動(dòng)畫(huà)效果）
轉(zhuǎn)載：https://www.cnblogs.com/Webzhoushifa/p/9509997.html
動(dòng)畫(huà)效果：
html
js
