前端動效學習（最全的動效落地方法）
2023-05-21 01:24:36
上篇內容回顧看這裡：《最全的動效落地方法（上篇）：在界面設計中，好動效是什麼樣的？》接下來進入下篇、主題是：從 Web 前端的角度來講，有哪些便捷的方法實現這些動效？
在目前行業內，動效設計的整個體系還未成熟；從最終呈現效果來講，動效可能會影響頁面性能、加載速度等。所以提到動效、很多同學可能會產生牴觸心理。
遇到問題我們首先拆解困難、在我看來在動效落地過程中面臨的困難可以分成以下三種：
對接困難：對接困難實際上就是溝通困難，這也是本文要探討的重點。因為界面動效是一種新出現的設計模式，在開發和設計之間，還沒有一套成熟的對接標準。設計困難：界面的動效本質上是靜態的界面在時間和交互維度上的延展，最常用的界面設計工具還不能進行時間軸的設計，而如 AE 這種傳統的動態設計工具缺少可交互性，很難對界面的交互維度進行高精度設計。實現困難：界面增加了時間維度，研發不僅僅需要布局，同樣要把控各個元素在時間流上的表現，個別情況下使用序列幀或者 Gif 的話，又需要嚴格控制資源大小，在各方面增加了開發的成本。
針對以上幾點，我在日常的工作過程中，總結出了一些更有效的解決方案，這些解決方案雖然不是十全十美，但是一般能覆蓋到工程環境中大多數情況。
對接
開發和設計師溝通困難。是因為沒有通過精準的參數去描述動效。要解決這個問題，我們需要創造一套有效的動效標註系統，這個系統必須做到以下兩點：讓設計師可以輕鬆地描述動效，讓開發可以準確地還原動效。構建這套『標註』的方法分以下兩個部分闡述：
動效量化
其實，界面動效背後涉及到的設計參數非常簡單，只有三種。無論多複雜的動效也是這三種參數經過組合拼接出來的：
（1）變化
變化可以劃分為四類（如動圖所示），這四類變化基本涵蓋了界面元素的全部運動方式，只要我們準確地描述元素在動效前後的變化量，就可以準確地完成「變化」這個參數的對接。
舉個例子，下面動圖中被扔出來的綠色小恐龍就同時包含上述四種變化。
它在 AE 中前後變化的參數如下：
那麼這個時候我們需要記錄的狀態（這裡只涉及到變化）就應該是這樣：
初始狀態：
位移：X軸 0旋轉 ：0度尺寸：1透明度：0.2結束狀態：
位移：X軸 200px旋轉： 180度尺寸：1.5透明度：1這樣看就清晰多啦。作為一名友善的設計師、千萬不要隨便拿一個 demo 說『就按照這樣做個差不多的效果就可以了』、那樣的話估計大部分開發只會一臉懵逼。
（2）時長
第二個關鍵參數就是時長，這個顧名思義也就是動畫播放的時間長度。無論變化是多是少，簡單還是複雜，我們需要把每一段變化的時間確定，時間短乾脆利落，時間長輕緩柔和。
在標註的時候，不要忘記標註清楚動效的起始時間和終止時間。
（3）曲線
曲線描述的是物體運動時候的速度變化，如果說變化和時長是動效的本體，那麼曲線就是動效的靈魂。
對於一個運動的物體，同樣的變化，同樣時間，賦予不同的速度曲線，會讓它的動效產生豐富的變化。 所以在動效設計中，曲線也是設計者最為關注的部分。
最基礎的速度曲線有線性（就是全程勻速）、緩入、緩出、緩入緩出四種：
雖然大家平時或多或少都用過以上幾種曲線來描述動畫的過程，但是大家不一定對曲線的具體用法有真正的理解、下面我會給出四個例子，來闡述一下以上幾種曲線的用法。
在上圖的例子中小圓運動時長一致，它們水平位移、一起到達終點，但是速度曲線不一樣。
圓一：緩出 ease-out、本來有一定的速度、慢慢剎車。 適合用在一個元素進入頁面的時候。圓二：緩入 ease-in、本來沒速度，越來越快， 相當於一個東西從零開始加速。適合用在一個元素離開頁面的時候。圓三：緩入緩出 ease-in-out：開頭結尾都沒有速度，先加速、再減速。是我們日常生活中最常見的物理運動。適合用在一個元素從頁面 A 點到 B 點。圓四：做勻速運動 linear 、看起來非常死板，不推薦使用。
那麼，動畫曲線在設計工具的哪裡出現呢？
AE 中可以通過值圖表，來調整動畫的曲線，並且通過換算（換算方法）得到可用於開發的 cubic-bezier 曲線參數，或者通過Flow這樣的插件直接用 cubic-bezier 曲線進行設計。
而在新興設計工具（Framer）中，本身工具就直接可以用 cubic-bezier 曲線定義動畫。
在前端開發中，可以直接利用設計給出的 cubic-bezier 曲線參數來描述動畫，示例如下：
現在有許多工具可以方便設計師去調曲線、實時預覽效果、並且顯示成前端需要的格式。在這裡推薦兩個：
曲線部分就這樣講完了，順帶提一下，雖然在這裡我舉例的是位移的速度曲線、但是其實旋轉、尺寸、透明度等等變化同樣是存在速度曲線的~ 在這些變化上加上速度曲線一樣可以讓動效更加自然貼近真實。前端也是可以實現的哦。
通過以上對動效參數的量化、我認為一份合格的標註應該是這樣的：
上圖中的交互動效來自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實現的：
最終實現結果
3、序列幀
序列幀可以理解為跑馬燈、具體實現方式是提供一張動畫的幀序列拼圖、通過 CSS 和 JS 控制它逐幀播放。跟交互動效不太一樣、序列幀動畫一般用在運營頁面的動畫裡。舉個例子、之前的春節活動裡、我曾經做過一個序列幀動畫。如下動圖所示：
它其實是用一張張的煙花圖拼接起來的雪碧圖：
為保證動效的最佳用戶體驗，使用序列幀也有許多要求
加載時間：最低網速環境下加載超過2s必須加loading。loading加載時長不超過5s；移動端流量消耗：移動端非wifi網絡下，動畫資源限制總大小不超過2M。通常用戶感知流暢幀率為60fps、為了保證最終效果、一般以20fps做為最低播放幀率。（1S播放30幀 ）
當然、為了減少溝通中不必要的損耗、在提供序列幀拼圖的時候、要注意以下交付格式
提供每幀圖的寬高尺寸每幀圖的播放時長，總幀數動效Demo，gif、MP4等，格式不限動畫觸發時機，如：頁面加載結束時，某按鈕點擊時補充一個製作序列幀的工具 gka
小結
本篇中主要討論在動效的落地中會面臨種種困難、並提供了相應的解決方法：
1、對接困難——量化動效
在對接過程中、提供一份量化動效的標準，讓設計師可以更加精準的描述這個動效，讓開發可以百分百還原這個動效。
標註的時候要把該元素的動效三要素 ——變化 、時長、曲線 都分別標出來。如下圖：
下面是標註模板的下載地址：動效標註模板下載連結
2、設計困難——設計工具
自動導出類 ：Lottie、Keyframes等開源庫，通過 AE 插件，將在 AE 中設計的動效自動導出為 前端可用的動效文件，前端只需要在項目中打入對應的開源庫，就可以免去對接交流的苦惱。
3、開發困難——開源庫
感謝閱讀 ：）寫的比較倉促、如果你還有什麼想了解的可以在留言中告訴我、希望可以給作者點個讚哦~
,
