前言

動畫主要的目的是讓UI的變動變柔和，增強用戶體驗。

優秀的動畫讓用戶感覺不到頁面的跳轉、感覺一切操作很自然。

如果動畫過于浮夸，風格跟不上潮流，或者動畫的時間把握不好，反而會造成用戶體驗下降的尷尬情況。

首先聊聊動畫怎么實現（只談原理不聊代碼）

關鍵幀動畫

大概就像折線圖一樣，取其中的關鍵點，確定其位置，然后將各個點連接起來。

關鍵幀動畫就是將動畫拆散成幾段，將關鍵點的狀態實現，然后為其創建補間動畫。

跟flash、PS、AE之類的沒什么區別。

最基礎的關鍵幀動畫只要兩幀就夠了。那么你只要能把起止狀態的頁面畫出來，就足夠了。比如透明度漸變、縮放、位移、旋轉等等。

復雜一點的，也就多幾個關鍵幀而已，一般是組合動畫，比如一個按鈕點擊之后，放大一個單位，縮小兩個單位，再放大一個單位，一個有點彈性的動畫就做好了。當然用阻尼這些東西會更簡單，但是有些情況阻尼參數不好拿捏，像這種簡單動畫我更傾向于用關鍵幀實現它。

路徑動畫

路徑動畫就復雜一點了，如果讓你位移的動畫轉彎，關鍵幀方式就比較難處理了。路徑動畫的難點在于路徑的繪制，如果你把你的動畫的過程所走的路徑畫出來，那么路徑動畫就手到擒來了。需要注意的就是，繪制路徑其實是無數個關鍵路徑組成的，其實就是多關鍵幀的位移動畫。所以想要動畫順暢，要注意關鍵路徑的分布。

交互式動畫

交互式動畫跟以上兩個都不同，比如我要做一個復雜的位移動畫，關鍵幀和路徑方式當然都能做，但是無論怎么做，路徑之間都會有很大的間隔，而如果用戶用手指去拖動一個視圖移動呢？如果每毫秒都能獲取到當前拖動到的位置，那么這個路徑將會有無數個關鍵幀組成，無數個關鍵幀意味著什么？動畫將會非常流暢。配合手勢，交互式動畫會讓用戶有掌控一切的感覺。

阻尼系數和變速動畫

阻尼系數這個概念我也說不準，就像彈簧一樣，拉伸的彈簧突然放松，彈簧會收緊，但由于慣性，收緊會超過一點，然后彈簧又會拉伸，超過一點又會收緊，像這樣逐漸衰退的過程。動畫中使用帶阻尼的動畫，會讓動畫效果更加俏皮，有些動畫也能更加擬物化，比如果凍動畫之類的。

變速動畫主要就是動畫過程的速度不是勻速的，說著簡單，但是體驗大不相同，加速的下落動畫，會更加真實，就像自由落體那樣。

動畫時間的藝術

動畫的持續時間是個很關鍵的問題。過快的動畫會體現不出動畫的作用，而過慢的動畫會讓用戶不耐煩。

比如一個按鈕，連續點擊會增加積分，一般人最快點擊速度按照每秒5下來算，那么0.2秒的動畫效果，就不會阻礙用戶的交互，非常自然，如果1秒的動畫，那么用戶就會反感了。臥槽？？？我特么點了5下才成功1次？不打斷用戶交互的動畫，才算好的動畫。

總結

每一次投入實踐的好動畫，都是要一點點體驗，一點點修改才能做好的，差距在毫秒之間，體驗千里之別。