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

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

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

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

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

對(duì)接

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

動(dòng)效量化

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

（1）變化

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

舉個(gè)例子，下面動(dòng)圖中被扔出來的綠色小恐龍就同時(shí)包含上述四種變化。

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

那么這個(gè)時(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è)計(jì)師、千萬不要隨便拿一個(gè) demo 說『就按照這樣做個(gè)差不多的效果就可以了』、那樣的話估計(jì)大部分開發(fā)只會(huì)一臉懵逼。

（2）時(shí)長

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

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

（3）曲線

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

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

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

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

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

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

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

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

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

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

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

cubic-bezier.com

http://www.css3beziercurve.net/

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

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

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

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

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

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

希望可以幫助你 ：）

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

設(shè)計(jì)方法與工具

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

自動(dòng)導(dǎo)出類

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

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

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

可交互類

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

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

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

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

除此之外，在「全?！垢拍钤絹碓奖恢匾暤慕裉欤O(shè)計(jì)師通過一個(gè)相對(duì)低成本的方式接觸代碼，了解前端知識(shí)，是一個(gè)非常高效的提升通道。

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

開發(fā)

動(dòng)畫的實(shí)現(xiàn)、常用的有以下幾種：

1、CSS 動(dòng)畫

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

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

2、 開源庫

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

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

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

3、序列幀

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

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

為保證動(dòng)效的最佳用戶體驗(yàn)，使用序列幀也有許多要求

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

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

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

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

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

小結(jié)

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

1、對(duì)接困難——量化動(dòng)效

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

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

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

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

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

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

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

Animate.cssdaneden.github.io

airbnb/lottie-webgithub.com

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

相關(guān)閱讀

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

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

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

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

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