網頁中複雜伴隨式動畫的分析

動畫、交互和產品體驗

動畫可以給平淡的交互增彩很多，利用好動畫，可以設計出很棒的交互，加強產品體驗。咱們經常會爲一些炫酷的效果而驚歎，這也是前端當時吸引個人地方。前端的複雜度除了狀態的管理、組件的拆分和代碼複用以外，交互和體驗也是一個很重要的方向，但這卻被不少前端所忽視，國內的產品交互大多也比較平淡無奇，多是考慮到迭代速度，多是實現成本。而國外的產品常常能看到一些使人眼前一亮的交互動畫效果。

說實話我不多接觸到一些複雜的交互效果的需求，多是國內的產品和設計都比較保守。最近接觸到一個較爲複雜的交互效果的需求，花了一天多的時間基本實現，過程當中收穫不少，讓我對交互動畫有了更深的認識。

觸發式動畫和伴隨式動畫

動畫分爲觸發式動畫和伴隨式動畫，觸發式動畫是指當用戶觸發以後，動畫就從開始一直運行到結束，不須要再次交互，好比基於css3的animation實現的各類動畫。而伴隨式動畫是隨着用戶的交互過程而逐步進行，用戶能夠控制動畫的過程，好比滾動視差動畫。伴隨式動畫由於用戶能夠控制動畫的過程，交互性和體驗更強，固然難度也會更大一些。

複雜伴隨式動畫的分析

複雜的動畫都是有不少變化的，到了某個值或者百分之多少換成另外一種效果。就像滾動視差動畫，滾動的不一樣方向，滾動的不一樣位置會有不一樣的動畫效果。

從設計圖開始，經過樣式和模版組合各類資源造成靜態的頁面，以後的動畫和業務邏輯都是對這些模版、樣式、資源的處理。動畫其實就是某一些樣式從某個值變化到某個值的過程，固然這裏指的是屬性動畫。

分析一個複雜的伴隨式動畫，首先要找出主要變化的是什麼屬性，而後這個屬性變化有哪些階段，每一個階段有哪些屬性值變化，是以怎麼樣的規律變化的。也就是「階段」、「屬性」、「變化規律」這3個要點。

伴隨式動畫實例分析

好比這個動畫，階段分爲向上和向下兩個階段。向上階段變化的屬性是蒙層的透明度和圖片的位置，蒙層透明度變化規律是從0到1勻速變化，圖片位置的變化規律是scrollTop變化值的一半。向下的階段變化的屬性是圖片的高度，變化的規律是初始高度加scrollTop的絕對值。

我最近作的那個動畫比這個例子更復雜一些，向上的階段又細分紅了2個小階段，第一個階段是不變的，到第二個階段纔開始變。

這裏變化的屬性中有圖片的位置和顯示範圍，好比向上的過程當中圖片位置上移，向下的過程當中顯示範圍變大。這種效果經過圖片標籤作起來比較麻煩：位置的改變還能夠經過改變圖片標籤的位置來實現，可是顯示範圍的變化卻須要開始隱藏部分顯示部分，而後交互的時候經過改變位置來顯示所有，比較麻煩。若是經過背景圖片來實現會簡單不少：位置的變化直接修改background-position，不須要修改元素位置因此也不會觸發reflow；顯示範圍的變化能夠經過修改元素高度，不須要考慮隱藏和位置的變化。

劃分清楚有幾個大小階段，每一個階段有哪些屬性值變化，每一個屬性值變化的規律是什麼以後實現就變得簡單了。

小程序實現伴隨式動畫的坑

在h5中實現了比較滿意的效果，但放到小程序中發現有很大問題。由於小程序是把渲染和邏輯分來處理的，二者須要異步的傳消息來通訊，隨着滾動，邏輯進程計算出不少新的屬性值，經過setData異步批量的傳給渲染進程，在高端機中幾乎是同步的實時地，但在一些性能較差的手機中能明顯感受出這種異步來，現象是我滾動完了一段時間以後，相關的元素的位置和其餘屬性纔開始變化，慢不少拍。

小程序這種邏輯和渲染分開而後異步通訊的方式是獨一份，因此這樣的坑我也是第一次碰見，目前在想解決的方式，估計要改變交互效果的方案了。

總結

合理的設計一些動畫能加強產品的體驗。動畫分爲觸發式動畫和伴隨式動畫，分析伴隨式動畫須要先劃分出有哪幾個階段，而後每一個階段有哪些屬性值變化，變化規律是什麼。若是涉及到圖片位置和顯示範圍的變化，用背景圖片實現會簡單不少。另外，小程序的渲染和邏輯分離的特殊性，會致使低端機下伴隨式動畫的和交互行爲的不一樣步，須要特別注意。