上篇內(nèi)容回顧看這里：《最全的動效落地方法（上篇）：在界面設(shè)計中，好動效是什么樣的？》接下來進(jìn)入下篇、主題是：從 Web 前端的角度來講，有哪些便捷的方法實現(xiàn)這些動效？

在目前行業(yè)內(nèi)，動效設(shè)計的整個體系還未成熟；從最終呈現(xiàn)效果來講，動效可能會影響頁面性能、加載速度等。所以提到動效、很多同學(xué)可能會產(chǎn)生抵觸心理。

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

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

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

對接

開發(fā)和設(shè)計師溝通困難。是因為沒有通過精準(zhǔn)的參數(shù)去描述動效。要解決這個問題，我們需要創(chuàng)造一套有效的動效標(biāo)注系統(tǒng)，這個系統(tǒng)必須做到以下兩點(diǎn)：讓設(shè)計師可以輕松地描述動效，讓開發(fā)可以準(zhǔn)確地還原動效。構(gòu)建這套『標(biāo)注』的方法分以下兩個部分闡述：

動效量化

其實，界面動效背后涉及到的設(shè)計參數(shù)非常簡單，只有三種。無論多復(fù)雜的動效也是這三種參數(shù)經(jīng)過組合拼接出來的：

（1）變化

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

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

它在 AE 中前后變化的參數(shù)如下：

那么這個時候我們需要記錄的狀態(tài)（這里只涉及到變化）就應(yīng)該是這樣：

初始狀態(tài)：

• 位移：X軸 0
• 旋轉(zhuǎn) ：0度
• 尺寸：1
• 透明度：0.2

結(jié)束狀態(tài)：

• 位移：X軸 200px
• 旋轉(zhuǎn)：+180度
• 尺寸：1.5
• 透明度：1

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

（2）時長

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

在標(biāo)注的時候，不要忘記標(biāo)注清楚動效的起始時間和終止時間。

（3）曲線

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

對于一個運(yùn)動的物體，同樣的變化，同樣時間，賦予不同的速度曲線，會讓它的動效產(chǎn)生豐富的變化。 所以在動效設(shè)計中，曲線也是設(shè)計者最為關(guān)注的部分。

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

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

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

• 圓一：緩出 ease-out、本來有一定的速度、慢慢剎車。 適合用在一個元素進(jìn)入頁面的時候。
• 圓二：緩入 ease-in、本來沒速度，越來越快， 相當(dāng)于一個東西從零開始加速。適合用在一個元素離開頁面的時候。
• 圓三：緩入緩出 ease-in-out：開頭結(jié)尾都沒有速度，先加速、再減速。是我們?nèi)粘Ｉ钪凶畛Ｒ姷奈锢磉\(yùn)動。適合用在一個元素從頁面 A 點(diǎn)到 B 點(diǎn)。
• 圓四：做勻速運(yùn)動 linear 、看起來非常死板，不推薦使用。

那么，動畫曲線在設(shè)計工具的哪里出現(xiàn)呢？

AE 中可以通過值圖表，來調(diào)整動畫的曲線，并且通過換算（換算方法）得到可用于開發(fā)的 cubic-bezier 曲線參數(shù)，或者通過 Flow 這樣的插件直接用 cubic-bezier 曲線進(jìn)行設(shè)計。

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

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

現(xiàn)在有許多工具可以方便設(shè)計師去調(diào)曲線、實時預(yù)覽效果、并且顯示成前端需要的格式。在這里推薦兩個：

cubic-bezier.com

http://www.css3beziercurve.net/

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

通過以上對動效參數(shù)的量化、我認(rèn)為一份合格的標(biāo)注應(yīng)該是這樣的：

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

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

如圖，注意曲線要標(biāo)注好英文名稱這樣前端才可以拿去用

這份標(biāo)注的模板我也上傳到云盤上啦~鏈接在這里：動效標(biāo)注

希望可以幫助你 ：）

如果看到這里你還有許多疑問、推薦閱讀 MartinRGB 寫的 MartinRGB/MTGuideline、里面從交互動畫的風(fēng)格定義、到動效設(shè)計 － 標(biāo)注 － 開發(fā)流程 都有介紹~

設(shè)計方法與工具

最傳統(tǒng)普遍應(yīng)用的動效設(shè)計工具是 After Effects，因為可能很多設(shè)計師在之前就有使用的經(jīng)驗，但它也有不符合當(dāng)下需求的缺點(diǎn)：不能交互、產(chǎn)出物不好量化、難分享。而目前也出現(xiàn)了很多新興的設(shè)計 – 產(chǎn)出解決方案，下面我會做一些簡單的介紹。

自動導(dǎo)出類

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

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

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

可交互類

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

在這些雨后春筍般冒出的新工具中，我最喜歡的就是 Framer~~它有著其他工具沒有的獨(dú)特屬性——用代碼構(gòu)建、基于 Web。

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

可能很多設(shè)計師看到代碼就如臨大敵，但事實上，因為用代碼構(gòu)建，設(shè)計師們可以十分有條理、清晰地設(shè)計擁有復(fù)雜邏輯的動效界面，同時，動畫部分的代碼內(nèi)容可以直接給開發(fā)參考。另外因為基于 Web 的特性，所有 Web 支持的效果，F(xiàn)ramer 都可以做到，自由度極高，而且設(shè)計產(chǎn)出可以通過一個網(wǎng)址快速分享，讓整條產(chǎn)品線上的人都可以低成本體驗?zāi)愕膭有гO(shè)計。

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

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

開發(fā)

動畫的實現(xiàn)、常用的有以下幾種：

1、CSS 動畫

學(xué)習(xí)資料推薦 w3school 上的文檔 CSS3 動畫

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

2、 開源庫

應(yīng)用從設(shè)計側(cè)提到過的 Lottie、Keyframe 類開源庫，將 AE 導(dǎo)出的動畫資源直接在項目中應(yīng)用。

上篇中提到的 San 首頁的 hover 動畫就是用 Lottie 實現(xiàn)的：

最終實現(xiàn)結(jié)果

3、序列幀

序列幀可以理解為跑馬燈、具體實現(xiàn)方式是提供一張動畫的幀序列拼圖、通過 CSS 和 JS 控制它逐幀播放。跟交互動效不太一樣、序列幀動畫一般用在運(yùn)營頁面的動畫里。舉個例子、之前的春節(jié)活動里、我曾經(jīng)做過一個序列幀動畫。如下動圖所示：

它其實是用一張張的煙花圖拼接起來的雪碧圖：

為保證動效的最佳用戶體驗，使用序列幀也有許多要求

• 加載時間：最低網(wǎng)速環(huán)境下加載超過2s必須加loading。loading加載時長不超過5s；
• 移動端流量消耗：移動端非wifi網(wǎng)絡(luò)下，動畫資源限制總大小不超過2M。

通常用戶感知流暢幀率為60fps、為了保證最終效果、一般以20fps做為最低播放幀率。（1S播放30幀 ）

當(dāng)然、為了減少溝通中不必要的損耗、在提供序列幀拼圖的時候、要注意以下交付格式

• 提供每幀圖的寬高尺寸
• 每幀圖的播放時長，總幀數(shù)
• 動效Demo，gif、MP4等，格式不限
• 動畫觸發(fā)時機(jī)，如：頁面加載結(jié)束時，某按鈕點(diǎn)擊時

補(bǔ)充一個制作序列幀的工具 gka

小結(jié)

本篇中主要討論在動效的落地中會面臨種種困難、并提供了相應(yīng)的解決方法：

1、對接困難——量化動效

在對接過程中、提供一份量化動效的標(biāo)準(zhǔn)，讓設(shè)計師可以更加精準(zhǔn)的描述這個動效，讓開發(fā)可以百分百還原這個動效。

標(biāo)注的時候要把該元素的動效三要素 ——變化 、時長、曲線 都分別標(biāo)出來。如下圖：

下面是標(biāo)注模板的下載地址：動效標(biāo)注模板下載鏈接pan.baidu.com

2、設(shè)計困難——設(shè)計工具

自動導(dǎo)出類 ：Lottie、Keyframes 等開源庫，通過 AE 插件，將在 AE 中設(shè)計的動效自動導(dǎo)出為 前端可用的動效文件，前端只需要在項目中打入對應(yīng)的開源庫，就可以免去對接交流的苦惱。

可交互類 ： Framer 上手資料：Melodie：Framer（framerjs.com）如何入門？

3、開發(fā)困難——開源庫

Animate.cssdaneden.github.io

airbnb/lottie-webgithub.com

感謝閱讀 ：）寫的比較倉促、如果你還有什么想了解的可以在留言中告訴我、希望可以給作者點(diǎn)個贊哦~

相關(guān)閱讀

最全的動效落地方法（上篇）：在界面設(shè)計中，好動效是什么樣的？

作者：綠Lvgreen，混前端圈的設(shè)計師，就職于百度 Echarts 團(tuán)隊。知乎專欄：UX 要素

來源：https://zhuanlan.zhihu.com/p/34501702

本文由 @綠Lvgreen 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議