????這一周工作主要圍繞了微信小程序的動(dòng)畫效果展開得湘，微信小程序的動(dòng)畫實(shí)際上是對(duì)原生的css3動(dòng)畫進(jìn)行了一層封裝瞧毙，所以其動(dòng)畫類型是與css類似的有惯裕，包括透明度變化，背景變化撞牢，寬高變化在內(nèi)的樣式變幻率碾，旋轉(zhuǎn)變幻，縮放變幻屋彪，矩陣變換等所宰。具體的API可參見微信小程序文檔https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html#wxcreateanimationobject其使用方式也感覺與css3動(dòng)畫異曲同工，不過首先需要初始化一個(gè)微信動(dòng)畫對(duì)象：
?????????this.favBlink = wx.createAnimation({?
????????????duration: 800, timingFunction: 'ease-in',?
????????})
????然后要像css3一樣初始化動(dòng)畫畜挥，設(shè)計(jì)動(dòng)畫的內(nèi)容仔粥，使用API進(jìn)行選擇器的相應(yīng)變幻：
?????????this.favBlink.opacity(1).translateY(-10).step()?
? ? ? ?? this.favBlink.opacity(0).step()?
? ? ? ?? this.favBlink.translateY(10).step()
????注意這里的step方法，step方法是微信小程序用來設(shè)定動(dòng)畫執(zhí)行的函數(shù)蟹但，如上躯泰，每一個(gè)step代表一個(gè)執(zhí)行步驟，進(jìn)行鏈?zhǔn)秸{(diào)用的一個(gè)step內(nèi)的內(nèi)容將同步執(zhí)行华糖，在不同step中的內(nèi)容將分布執(zhí)行麦向。但是這也是相對(duì)的，什么意思呢缅阳？比如旋轉(zhuǎn)變幻，如果將兩個(gè)相反方向的動(dòng)畫同步執(zhí)行景描，那么它只會(huì)呈現(xiàn)第二個(gè)十办，當(dāng)然這也可以理解為一種同步執(zhí)行。另外超棺，這樣的同步還和所設(shè)置的duration有關(guān)向族，如果duration過短，那么在這個(gè)時(shí)間段內(nèi)可能就沒有辦法執(zhí)行完成相應(yīng)的動(dòng)畫棠绘，在微信小程序中它的處理在視覺上感覺就會(huì)省略動(dòng)畫件相，比如旋轉(zhuǎn)，即使你分step寫了多次旋轉(zhuǎn)氧苍，它在不夠充足的時(shí)間內(nèi)夜矗，可能也只會(huì)呈現(xiàn)一次旋轉(zhuǎn)。
????最后就是要將動(dòng)畫效果與相應(yīng)dom綁定让虐，在dom中使用animation屬性動(dòng)態(tài)綁定一個(gè)變量紊撕，animation="{{xxx}}"，然后在js中將這個(gè)屬性用export實(shí)例化：?
??????????this.setData({?
????????????wordAnimation: this.favBlink.export()?
? ? ? ? ?? })
? ? ? 一個(gè)先出現(xiàn)向上移動(dòng)赡突，然后再消失緩慢向下的動(dòng)畫就完成了对扶。
? ? ?? 這里對(duì)于微信的動(dòng)畫起始狀態(tài)與終止?fàn)顟B(tài)的變化與選定区赵，其實(shí)還有一些疑問。在實(shí)際的編碼中經(jīng)常遇到這樣的問題浪南，當(dāng)我們完成一段動(dòng)畫的時(shí)候笼才，在一段時(shí)間后需要繼續(xù)在相同的dom上開始動(dòng)畫，就會(huì)出現(xiàn)很多詭異的不在預(yù)料之內(nèi)的動(dòng)畫络凿，比較突出的是如下的一些情形：?
????????1.在一個(gè)dom之上執(zhí)行了rotateY結(jié)合tanslate3d的動(dòng)畫骡送，將其使用opacity隱藏（整體執(zhí)行的是一種類似于向左翻頁的動(dòng)畫）。再次顯示希望其執(zhí)行向右翻回上一頁的動(dòng)畫喷众，此時(shí)再顯示的時(shí)候（注意這里并沒有使用過display:none各谚，而只是使用opacity:0隱藏了），該dom只保存了rotate（30）而沒有保留translate的偏移（至少視覺上是這樣到千，這個(gè)錯(cuò)誤比較久昌渤，無法復(fù)現(xiàn)）。?
????????2.同樣的憔四，對(duì)一個(gè)文字執(zhí)行了一個(gè)向上平移的translate動(dòng)畫并且加上opacity：1膀息，然后將其隱藏，這次使用的是wx:if隱藏了赵，這次是徹底在dom中消失潜支，但是再次出現(xiàn)的時(shí)候，它保留了translate后的位置
?????這種起始狀態(tài)與終止?fàn)顟B(tài)的模棱兩可在開發(fā)中讓人很疑惑柿汛，不知道是我理解的不到位還是本身優(yōu)化的不夠流暢冗酿，微信小程序在處理簡(jiǎn)單的動(dòng)畫的時(shí)候，流暢到可以與原生近似络断，但是感覺當(dāng)動(dòng)畫復(fù)雜起來的時(shí)候裁替，感覺就沒有理想的那么流暢了。而處理這種初始狀態(tài)與終止?fàn)顟B(tài)的混亂問題貌笨，我只好每次執(zhí)行完動(dòng)畫之后都再手動(dòng)設(shè)置dom的位置弱判，并且清除動(dòng)畫，這樣雖然感覺麻煩許多锥惋，但是是相對(duì)比較穩(wěn)妥的做法昌腰。?
????????setTimeout(() => {?
????????????this.beginRotateAnimation = false?
????????????this.setData({?
????????????????backPanelChange: null,?
????????????????frontPanelChange: null,?
????????}) }, 1000);
