網頁中複雜伴隨式動畫的分析
動畫能夠給平淡的互動增彩不少，利用好動畫，能夠設計出很棒的互動，增強產品體驗。我們常常會為一些炫酷的效果而驚歎，這也是前端當時吸引我的地方。前端的複雜度除了狀態的管理、元件的拆分和程式碼複用之外，互動和體驗也是一個很重要的方向，但這卻被很多前端所忽視，國內的產品互動大多也比較平淡無奇，可能是考慮到迭代速度，可能是實現成本。而國外的產品經常能看到一些令人眼前一亮的互動動畫效果。
說實話我很少接觸到一些複雜的互動效果的需求，可能是國內的產品和設計都比較保守。最近接觸到一個較為複雜的互動效果的需求，花了一天多的時間基本實現，過程中收穫很多，讓我對互動動畫有了更深的認識。
觸發式動畫和伴隨式動畫
動畫分為觸發式動畫和伴隨式動畫，觸發式動畫是指當用戶觸發之後，動畫就從開始一直執行到結束，不需要再次互動，比如基於css3的animation實現的各種動畫。而伴隨式動畫是隨著使用者的互動過程而逐步進行，使用者可以控制動畫的過程，比如滾動視差動畫。伴隨式動畫因為使用者可以控制動畫的過程，互動性和體驗更強，當然難度也會更大一些。
複雜伴隨式動畫的分析
複雜的動畫都是有很多變化的，到了某個值或者百分之多少換成另一種效果。就像滾動視差動畫，滾動的不同方向，滾動的不同位置會有不同的動畫效果。
從設計圖開始，通過樣式和模版組合各種資源形成靜態的頁面，之後的動畫和業務邏輯都是對這些模版、樣式、資源的處理。動畫其實就是某一些樣式從某個值變化到某個值的過程，當然這裡指的是屬性動畫。
分析一個複雜的伴隨式動畫，首先要找出主要變化的是什麼屬性，然後這個屬性變化有哪些階段，每個階段有哪些屬性值變化，是以怎麼樣的規律變化的。也就是“階段”、“屬性”、“變化規律”這3個要點。
伴隨式動畫例項分析
比如這個動畫，階段分為向上和向下兩個階段。向上階段變化的屬性是蒙層的透明度和圖片的位置，蒙層透明度變化規律是從0到1勻速變化，圖片位置的變化規律是scrollTop變化值的一半。向下的階段變化的屬性是圖片的高度，變化的規律是初始高度加scrollTop的絕對值。
我最近做的那個動畫比這個例子更復雜一些，向上的階段又細分成了2個小階段，第一個階段是不變的，到第二個階段才開始變。
這裡變化的屬性中有圖片的位置和顯示範圍，比如向上的過程中圖片位置上移，向下的過程中顯示範圍變大。這種效果通過圖片標籤做起來比較麻煩：位置的改變還可以通過改變圖片標籤的位置來實現，但是顯示範圍的變化卻需要開始隱藏部分顯示部分，然後互動的時候通過改變位置來顯示全部，比較麻煩。如果通過背景圖片來實現會簡單很多：位置的變化直接修改background-position，不需要修改元素位置所以也不會觸發reflow；顯示範圍的變化可以通過修改元素高度，不需要考慮隱藏和位置的變化。
劃分清楚有幾個大小階段，每個階段有哪些屬性值變化，每個屬性值變化的規律是什麼之後實現就變得簡單了。
小程式實現伴隨式動畫的坑
在h5中實現了比較滿意的效果，但放到小程式中發現有很大問題。因為小程式是把渲染和邏輯分來處理的，兩者需要非同步的傳訊息來通訊，隨著滾動，邏輯程序計算出很多新的屬性值，通過setData非同步批量的傳給渲染程序，在高階機中幾乎是同步的實時地，但在一些效能較差的手機中能明顯感覺出這種非同步來，現象是我滾動完了一段時間之後，相關的元素的位置和其他屬性才開始變化，慢很多拍。
小程式這種邏輯和渲染分開然後非同步通訊的方式是獨一份，所以這樣的坑我也是第一次遇見，目前在想解決的方式，估計要改變互動效果的方案了。
總結
合理的設計一些動畫能增強產品的體驗。動畫分為觸發式動畫和伴隨式動畫，分析伴隨式動畫需要先劃分出有哪幾個階段，然後每個階段有哪些屬性值變化，變化規律是什麼。如果涉及到圖片位置和顯示範圍的變化，用背景圖片實現會簡單很多。另外，小程式的渲染和邏輯分離的特殊性，會導致低端機下伴隨式動畫的和互動行為的不同步，需要特別注意。