最全最好用的動效落地方法、都幫你總結好了（下）

04-23

上篇內容回顧看這裡：最全最好用的動效落地方法、都幫你總結好了（上）

接下來進入下篇、主題是：從 Web 前端的角度來講、有哪些便捷的方法實現這些動效？

在目前行業內，動效設計的整個體系還未成熟；從最終呈現效果來講，動效可能會影響頁面性能、載入速度等。所以提到動效、很多同學可能會產生抵觸心理。

遇到問題我們首先拆解困難、在我看來在動效落地過程中面臨的困難可以分成以下三種：

對接困難：對接困難實際上就是溝通困難，這也是本文要探討的重點。因為界面動效是一種新出現的設計模式，在開發和設計之間，還沒有一套成熟的對接標準。
設計困難：界面的動效本質上是靜態的界面在時間和交互維度上的延展，最常用的界面設計工具還不能進行時間軸的設計，而如 AE 這種傳統的動態設計工具缺少可交互性，很難對界面的交互維度進行高精度設計。
實現困難：界面增加了時間維度，研發不僅僅需要布局，同樣要把控各個元素在時間流上的表現，個別情況下使用序列幀或者 Gif 的話，又需要嚴格控制資源大小，在各方面增加了開發的成本。

針對以上幾點，我在日常的工作過程中，總結出了一些更有效的解決方案，這些解決方案雖然不是十全十美，但是一般能覆蓋到工程環境中大多數情況。

對接

開發和設計師溝通困難。是因為沒有通過精準的參數去描述動效。要解決這個問題，我們需要創造一套有效的動效標註系統，這個系統必須做到以下兩點：讓設計師可以輕鬆地描述動效，讓開發可以準確地還原動效。構建這套『標註』的方法分以下兩個部分闡述：

動效量化

其實，界面動效背後涉及到的設計參數非常簡單，只有三種。無論多複雜的動效也是這三種參數經過組合拼接出來的：

1）變化

變化可以劃分為四類（如動圖所示），這四類變化基本涵蓋了界面元素的全部運動方式，只要我們準確地描述元素在動效前後的變化量，就可以準確地完成「變化」這個參數的對接。

舉個例子，下面動圖中被扔出來的綠色小恐龍就同時包含上述四種變化。

它在 AE 中前後變化的參數如下：

那麼這個時候我們需要記錄的狀態（這裡只涉及到變化）就應該是這樣：

初始狀態：

位移：X軸 0

旋轉：0度

尺寸：1

透明度：0.2

---------------------

結束狀態：

位移：X軸 200px

旋轉：+180度

尺寸：1.5

透明度：1

---------------------

這樣看就清晰多啦。作為一名友善的設計師、千萬不要隨便拿一個 demo 說『就按照這樣做個差不多的效果就可以了』、那樣的話估計大部分開發只會一臉懵逼。

二、時長

第二個關鍵參數就是時長，這個顧名思義也就是動畫播放的時間長度。無論變化是多是少，簡單還是複雜，我們需要把每一段變化的時間確定，時間短乾脆利落，時間長輕緩柔和。

在標註的時候，不要忘記標註清楚動效的起始時間和終止時間。

三、曲線

曲線描述的是物體運動時候的速度變化，如果說變化和時長是動效的本體，那麼曲線就是動效的靈魂。

對於一個運動的物體，同樣的變化，同樣時間，賦予不同的速度曲線，會讓它的動效產生豐富的變化。所以在動效設計中，曲線也是設計者最為關注的部分。

最基礎的速度曲線有線性（就是全程勻速）、緩入、緩出、緩入緩出四種

雖然大家平時或多或少都用過以上幾種曲線來描述動畫的過程，但是大家不一定對曲線的具體用法有真正的理解、下面我會給出四個例子，來闡述一下以上幾種曲線的用法。

在上圖的例子中小圓運動時長一致，它們水平位移、一起到達終點，但是速度曲線不一樣。

https://www.zhihu.com/video/960184717224677376

圓一：緩出 ease-out、本來有一定的速度、慢慢剎車。適合用在一個元素進入頁面的時候。

圓二：緩入 ease-in、本來沒速度，越來越快，相當於一個東西從零開始加速。適合用在一個元素離開頁面的時候。

圓三：緩入緩出 ease-in-out：開頭結尾都沒有速度，先加速、再減速。是我們日常生活中最常見的物理運動。適合用在一個元素從頁面 A 點到 B 點。

圓四：做勻速運動 linear 、看起來非常死板，不推薦使用。

那麼動畫曲線在設計工具的哪裡出現呢？

AE 中可以通過值圖表，來調整動畫的曲線，並且通過換算（換算方法）得到可用於開發的 cubic-bezier 曲線參數，或者通過 Flow 這樣的插件直接用 cubic-bezier 曲線進行設計。

而在新興設計工具（Framer）中，本身工具就直接可以用 cubic-bezier 曲線定義動畫。

在前端開發中，可以直接利用設計給出的 cubic-bezier 曲線參數來描述動畫，示例如下：

div { -webkit-transition: all 500ms cubic-bezier(0.10, 0.45, 0.46, 0.99); transition: all 500ms cubic-bezier(0.10, 0.45, 0.46, 0.99); }

現在有許多工具可以方便設計師去調曲線、實時預覽效果、並且顯示成前端需要的格式。在這裡推薦兩個：

cubic-bezier.com

http://www.css3beziercurve.net/

曲線部分就這樣講完了，順帶提一下，雖然在這裡我舉例的是位移的速度曲線、但是其實旋轉、尺寸、透明度等等變化同樣是存在速度曲線的~ 在這些變化上加上速度曲線一樣可以讓動效更加自然貼近真實。前端也是可以實現的哦。

標註

通過以上對動效參數的量化、我認為一份合格的標註應該是這樣的：

上圖中的交互動效來自Amazon Prime Music、界面中出現了兩個元素（加號 icon & 對勾 icon）的動畫，雖然看起來非常簡單、但是包含著極為豐富的變化。

標註的時候除了說明動效的三元素、還要說明觸發條件以及動畫對象、所以最好用表格的方式、這樣可以更清晰的把它們每一段變化都清晰羅列出來：

如圖、注意曲線要標註好英文名稱這樣前端才可以拿去用

這份標註的模板我也上傳到雲盤上啦~鏈接在這裡：動效標註

希望可以幫助你：）

如果看到這裡你還有許多疑問、推薦閱讀 MartinRGB 寫的 MartinRGB/MTGuideline、裡面從交互動畫的風格定義、到動效設計－標註－開發流程都有介紹~

設計方法與工具

最傳統普遍應用的動效設計工具是 After Effects，因為可能很多設計師在之前就有使用的經驗，但它也有不符合當下需求的缺點：不能交互、產出物不好量化、難分享。而目前也出現了很多新興的設計 - 產出解決方案，下面我會做一些簡單的介紹。

自動導出類

目前，有像 Lottie、Keyframes 等開源庫，通過 AE 插件，將在 AE 中設計的動效自動導出為前端可用的動效文件，前端只需要在項目中打入對應的開源庫，就可以免去對接交流的苦惱。

雖然看上去十分簡潔美好，但是這種方案的應用場景是有限的：僅適合應用在純動效元素（例如動態 ICON），無法用於 UI 的界面元素。對 AE 的效果支持也有限，並不是有了庫就能為所欲為。

但總的來說，自動導出類方案可以在純動態元素的場景下大大提升工作效率，產品性能。相比 Gif 或者幀序列，導出的 json 文件容量小，在端上顯示質量高。

可交互類

除了依賴於 AE 傳統工具的解決方案，也有更多直接另起爐灶的設計工具。目前應用較廣的包括 Principle、Flinto、Framer、Origami 等等。相比傳統工具，這些新的工具無一例外加入了可交互的特性，讓我們可以對產品的交互流進行設計和模擬。比起之前，我們可以在設計階段就感受產品的「手感」，讓動效設計的精度到達一個新的水平。

在這些雨後春筍般冒出的新工具中，我最喜歡的就是 Framer~~它有著其他工具沒有的獨特屬性——用代碼構建、基於 Web。

圖中就是用 Framer 寫的代碼示例

可能很多設計師看到代碼就如臨大敵，但事實上，因為用代碼構建，設計師們可以十分有條理、清晰地設計擁有複雜邏輯的動效界面，同時，動畫部分的代碼內容可以直接給開發參考。另外因為基於 Web 的特性，所有 Web 支持的效果，Framer 都可以做到，自由度極高，而且設計產出可以通過一個網址快速分享，讓整條產品線上的人都可以低成本體驗你的動效設計。

除此之外，在「全棧」概念越來越被重視的今天，設計師通過一個相對低成本的方式接觸代碼，了解前端知識，是一個非常高效的提升通道。

Framer 的上手資料推薦 Melodie 的知乎回答：Melodie：Framer（framerjs.com）如何入門？是目前來說比較易懂的入門 Framer 的文章。

開發

動畫的實現、常用的有以下幾種。

1、CSS 動畫

學習資料推薦 w3school 上的文檔 CSS3 動畫

值得注意的是、設計師雖然可以不懂技術、但是一定要善於利用已有的案例來表達自己的設計意圖。CSS 可以實現的動畫案例具體可以查看 Animate.css ，它一個跨瀏覽器的 CSS3 動畫庫。如果它的示例中有你想要的動效的話，代表可以用 CSS 實現、除此之外、一些簡單的矢量規則動效也能夠通過 CSS 實現。

2、開源庫

應用從設計側提到過的 Lottie、Keyframe 類開源庫，將 AE 導出的動畫資源直接在項目中應用。

上篇中提到的 San 首頁的 hover 動畫就是用 Lottie 實現的：