動畫製作

最近做了很多關於動畫的操作，進而也多了很多感觸與心得，想分享一下這個經驗。

首先還是覺得我們家UI設計師很厲害，並不是講著一口「動畫」，而是很明確出了 Prototype 給我，一目瞭然他想要的效果。當然過程密切溝通，討論每一個細節想呈現的效果，這樣的溝通過程我覺得是相當愉快的。其中超級多的細節，包含動畫呈現的節奏、RWD會產生的非預期現象、操作產生的不協調感等等⋯

動畫的本質是處理每一個影格

其實說到動畫，其實還是得談談所謂的「動畫影格」概念，雖然在網頁大部分的情境可以仰賴 Dom 系統和 CSS 來操作元素節點的變化，但有時候還是需要知道「渲染」的概念。而動畫的本質就是在於處理每一個「frame」畫面的「狀態」。通常網頁每個 frame 大致上是 16ms 或 12ms，有時會依據效能的運行狀況影響每個 frame 的實際的時間。所以實質上動畫本質是「處理每一個影格畫面該長什麼樣子」來達到「視覺暫留」，因而有「動畫感」。

Reflow 與 Repaint：連「取得」都算

但說到動畫也要來談談在網頁上所謂的 Reflow 和 Repaint 兩種渲染，Reflow 職責在是計算和處理畫面的「空間」，Repaint 職責在表現畫面的像素表現。但不得不說，Reflow 因為會佔據瀏覽器引擎主線程的工作，所以大家常常說「操作DOM很消費瀏覽器效能」。那到底什麼行為會產生 Reflow？基本上「任何改變及及取得元素長寬大小與定位」都會引起 Reflow。沒有錯，「取得」也算，這就代表要特別小心了，不要任意即時取得元素狀態，不然都是不必要的消費。

實作上最好的解法，是脫離框架直接操作 DOM

最後也要來談談實作這件事，以往我們會很習慣把很多資料存在框架之中，透過改變資料來驅動畫面。然而做動畫時卻不那麼的合適，就拿我最熟悉的 react 和 vue 來說。如果是 vue 會造成非常高的檢查運算壓力，雖然將就一下還行，但也會造成操作上的不順暢。如果是 react 更加棘手，不但會造成極大的渲染壓力，還難以取得下一個 effect 的時間點。而我後來多次實作的感想，我覺得最好的解方是從頭至尾脫離框架的運行，改以純粹的 Dom 操作來達到視覺效果是效益最好的。

動畫效果在商業上不會經常有各種天花亂墜的需求，畢竟動畫背後的開發成本就是昂貴。不過偶爾一次的感受真的蠻棒的，充滿挑戰與有趣。

關於動畫你有什麼觀點嗎？歡迎與我討論一下唷！