導(dǎo)語(yǔ)：在上一篇文章《交互體驗(yàn)之動(dòng)效深耕（上）》中，我們了解到了動(dòng)效設(shè)計(jì)的意義與價(jià)值、動(dòng)效的作用以及交互動(dòng)效中的設(shè)計(jì)原則，接下來(lái)作者繼續(xù)和我們聊一聊動(dòng)效的分類和落地方案。

四、產(chǎn)品中的動(dòng)效分類

動(dòng)效大致可以分為：引導(dǎo)類動(dòng)效、轉(zhuǎn)場(chǎng)類動(dòng)效、反饋類動(dòng)效和品牌類動(dòng)效四種。

1. 引導(dǎo)類動(dòng)效

通過(guò)視覺(jué)和動(dòng)效聚焦用戶視線，以此來(lái)達(dá)到吸引用戶注意力的目的，幫助產(chǎn)品業(yè)務(wù)達(dá)成某個(gè)模塊的KPI，例如：提示引導(dǎo)、活動(dòng)入口、動(dòng)態(tài)Banner圖等等。

作者：Johny vino?

2. 轉(zhuǎn)場(chǎng)類動(dòng)效

轉(zhuǎn)場(chǎng)類動(dòng)效，簡(jiǎn)單的說(shuō)就是幫助用戶理解頁(yè)面間的變化和層級(jí)關(guān)系，讓用戶清楚的知道自己當(dāng)前所在的位置以及將要跳轉(zhuǎn)的頁(yè)面。

3. 反饋類動(dòng)效

反饋類動(dòng)效是告訴用戶當(dāng)前系統(tǒng)的運(yùn)行狀態(tài)，降低用戶迷失感，給予用戶一定的心里預(yù)期。

作者：James G.

4. 品牌類動(dòng)效

品牌類動(dòng)效就是通過(guò)動(dòng)態(tài)展示的手法，突出產(chǎn)品核心功能和特點(diǎn)，打造產(chǎn)品情感化，給予用戶更深更強(qiáng)烈的記憶，起到品牌宣傳的目的。

作者：Alexander Pyatkov

五、動(dòng)效時(shí)長(zhǎng)

動(dòng)效時(shí)長(zhǎng)是指從動(dòng)效開始到動(dòng)效結(jié)束總共所需要的時(shí)間，對(duì)于動(dòng)效時(shí)長(zhǎng)的把控至關(guān)重要，時(shí)間過(guò)長(zhǎng)會(huì)有明顯的滯留感，時(shí)間過(guò)短用戶還沒(méi)來(lái)得及感知就結(jié)束了。所以動(dòng)效需要保證快速相應(yīng)的同時(shí)還要兼顧從容優(yōu)雅。

一位倫敦城市學(xué)院神經(jīng)學(xué)創(chuàng)立者 Davina Bristow 曾經(jīng)提出，大多數(shù)人每分鐘的眨眼次數(shù)為15次，而平均的持續(xù)時(shí)長(zhǎng)為100～150ms。iOS和Android系統(tǒng)的動(dòng)作反饋時(shí)間位于100～500ms之間，也就是100ms用戶就能夠產(chǎn)生感知了。

所以我們可以定義50ms為最小增減幅度，100ms為最大的增減幅度，統(tǒng)一定義不同場(chǎng)景及類型的動(dòng)效時(shí)長(zhǎng)規(guī)范。

六、動(dòng)效落地的N種解決方案

為了能夠方便用戶快速獲取產(chǎn)品和加載產(chǎn)品資源，我們需要控制下載包的體積大小，以保證用戶能夠在較低的成本下獲取產(chǎn)品。

所以我們要控制動(dòng)畫的體積大小，還有一個(gè)原因就是占用內(nèi)存越大的動(dòng)畫對(duì)系統(tǒng)性能的占用會(huì)相應(yīng)變大，從而導(dǎo)致部分用戶手機(jī)出現(xiàn)卡頓，死機(jī)等情況，從而造成用戶流失。

1. 非交互類動(dòng)效落地方案

1）GIF格式

GIF格式是1987年由 CompuServe 公司創(chuàng)造，由于壓縮技術(shù)好，即便是在當(dāng)時(shí)的低速網(wǎng)絡(luò)時(shí)代也能夠無(wú)壓力的顯示，從而備受歡迎。由于年代久遠(yuǎn)的原因也讓他擁有非常強(qiáng)的兼容性，目前市面上的大多數(shù)智能設(shè)備都能夠?qū)ζ渲苯宇A(yù)覽。

但隨著互聯(lián)網(wǎng)的不斷發(fā)展GIF格式本身所存在的問(wèn)題也逐漸顯現(xiàn)：

1. 對(duì)設(shè)備的內(nèi)存和性能的占用非常大（GIF的持續(xù)時(shí)長(zhǎng)和尺寸等都是影響因素）；
2. 在輸出透明背景的GIF時(shí)，常會(huì)出現(xiàn)鋸齒和白邊的情況；
3. 是一種有損輸出的文件格式，在色彩和畫質(zhì)上都有所體現(xiàn)。

雖然GIF格式存在以上的問(wèn)題，但由于在不同設(shè)備之間具有良好的兼容性，所以很多平臺(tái)都會(huì)選擇GIF作為預(yù)覽動(dòng)畫的方式，那該如何輸出GIF呢？

方式一：第一種方式也是比較傳統(tǒng)的一種輸出方式，利用PS導(dǎo)出GIF。

雖然這是一種較為傳統(tǒng)的輸出方式，但是就目前來(lái)說(shuō)這是唯一一種能夠高質(zhì)量輸出GIF的方法。

方式二：利用AE腳本GIFGUN快速導(dǎo)出GIF，好處就是操作簡(jiǎn)單，導(dǎo)出速度快。能夠自定義設(shè)置GIF文件的大小、幀數(shù)率等屬性。但導(dǎo)出GIF的質(zhì)量不高，會(huì)出現(xiàn)掉幀卡頓的情況，色差也比較大。

方式三：通過(guò)Ezgif將視頻轉(zhuǎn)換成GIF，Ezgif支持上傳多種視頻格式，包含mp4、webm、avi、mpeg、flv、mov和3gp等，支持的最大視頻體積可達(dá)到100MB。可以通過(guò)參數(shù)設(shè)置，截取視頻中的一部分轉(zhuǎn)化成為GIF。

方式四：使用Brewery3軟件導(dǎo)出GIF，雖然導(dǎo)出的內(nèi)存占用不大，但是輸出的質(zhì)量卻很低，無(wú)較高要求時(shí)可選擇使用。

2）視頻

視頻格式無(wú)可厚非肯定是普遍被眾多產(chǎn)品所兼容的，視頻格式要比GIF的內(nèi)存占用更小，但對(duì)透明通道的支持卻不太友好，并且他是一種有損的輸出格式。平時(shí)對(duì)視頻的壓縮可以使用這個(gè)工具-Handbrake。

3）Apng/Webp

兩者都是由目前的GIF、PNG、JPG等衍生而來(lái)的，其中Apng是一個(gè)基于PNG位圖動(dòng)畫格式的圖片，是PNG的位圖動(dòng)畫擴(kuò)展，能夠?qū)崿F(xiàn)PNG格式的動(dòng)態(tài)圖片效果，它的出現(xiàn)是為了代替舊版的GIF格式，但目前還尚未得到官方的認(rèn)可。

而Webp是Google在 2010 年開發(fā)的一種全部通吃的圖片格式，因?yàn)樗粌H可以有損(替代JPG)也可以無(wú)損(替代PNG)，還可以動(dòng)(替代GIF)，并且在壓縮率上全面超越了這三種常用的格式。

目前在所有的主流瀏覽器上都可以完美支持，但是在移動(dòng)設(shè)備上需要通過(guò)代碼框架才可以完美支持。

• Apng優(yōu)點(diǎn)：相比 GIF 支持的色彩范圍更廣，也更加清晰，占用的內(nèi)存更低，并且支持透明通道；
• Webp優(yōu)點(diǎn)：與Apng特點(diǎn)相似，但ios設(shè)備需要借助Google 發(fā)布的函數(shù)庫(kù)才能夠支持。

如何輸出 Apng/Webp ？

方式一：第一種方式可以選擇工具：iSparta ，將生成的PNG序列導(dǎo)入 iSparta 當(dāng)中，調(diào)整參數(shù)導(dǎo)出即可。但如果序列幀較多的時(shí)候?qū)С鏊俣葧?huì)變得非常慢，而且偶爾還會(huì)出現(xiàn)卡死、閃退和圖片尺寸不統(tǒng)一等問(wèn)題。

方式二：使用AE插件——BX-Webp/Apng Exporter。

注意：導(dǎo)出地址不要設(shè)置為桌面否則會(huì)出現(xiàn)數(shù)據(jù)丟失的情況，務(wù)必要將導(dǎo)出地址改成「/xxx.webp」或者「/xxx.png」再導(dǎo)出！

4）序列幀

序列幀是把動(dòng)畫用一幀一幀的圖像文件來(lái)表示，可以通過(guò)一些工具對(duì)圖層序列進(jìn)行壓縮處理以達(dá)到降低內(nèi)存的目的。雖然序列幀是無(wú)損低內(nèi)存的，但是最好只在客戶端當(dāng)中使用，不建議在Web環(huán)境中使用。

因?yàn)閃eb中的圖片資源是需要向服務(wù)器請(qǐng)求下載的，如果序列幀過(guò)多無(wú)疑會(huì)增加資源請(qǐng)求的次數(shù)，并且在高頻次的請(qǐng)求中如果出現(xiàn)錯(cuò)誤就很容易造成動(dòng)畫無(wú)法正常播放的情況。

而在客戶端當(dāng)中序列幀資源是存儲(chǔ)在APP安裝包當(dāng)中的，所以不會(huì)出現(xiàn)問(wèn)題。在Web中如果想要解決上述問(wèn)題，就需要減少加載資源的請(qǐng)求次數(shù)，也就誕生了CSS Sprite—雪碧圖/精靈圖。

5）精靈圖/雪碧圖

精靈圖/雪碧圖（CSS Sprite）是針對(duì)序列幀素材應(yīng)運(yùn)而生的，是為了滿足Web端播放序列幀的訴求，CSS Sprite 是一種圖像拼合技術(shù)，這種方法是將元素拼合在一張圖片上，然后利用CSS的背景定位來(lái)顯示需要展示的圖片部分，以這種形式來(lái)減少加載資源的請(qǐng)求。

如何輸出：可以使用AE的插件 CSS Sprite Exporter 來(lái)輸出。

6）Lottie

lottie是由Airbnb推出，是用于解析使用Bodymovin導(dǎo)出為JSON的AE動(dòng)畫的第三方庫(kù)，支持ios、windows和web端。他的工作原理是把我們的各種矢量元素、位圖以及他們的效果關(guān)鍵節(jié)點(diǎn)以打包的形式行成一個(gè)JSON 格式的文件。

但是當(dāng)我們使用AE插件Bodymovin導(dǎo)出JSON后，開發(fā)并不能直接使用導(dǎo)出的JSON文件，開發(fā)人員還需要在代碼中引入Airbnb 提供的 Lottie 第三方庫(kù)來(lái)讀取播放JSON動(dòng)畫。

實(shí)現(xiàn)原理其實(shí)就是把動(dòng)畫中的元素進(jìn)行拆分，并且描述每個(gè)元素的動(dòng)畫執(zhí)行路徑和執(zhí)行時(shí)間。其次為了保證交付給開發(fā)的JSON文件沒(méi)有任何問(wèn)題，我們需要在制作動(dòng)畫的時(shí)候格外注意Lottie不支持的屬性。

此外，雖然Lottie是一個(gè)非常強(qiáng)大的第三方動(dòng)畫庫(kù)，但是還是會(huì)存在很多不確定性和兼容性的問(wèn)題，例如他對(duì)緩動(dòng)曲線的解析會(huì)占用非常多的內(nèi)存，在不同設(shè)備和平臺(tái)上的支持效果也非常的不穩(wěn)定。

關(guān)于JSON的導(dǎo)出除了我們熟知的Bodymovin插件，還有一個(gè)Lottie平臺(tái)推出的LottieFile插件，他與Bodymovin類似，只是功能更加豐富，理論上是能夠?qū)崟r(shí)預(yù)覽AE動(dòng)畫的，但由于網(wǎng)絡(luò)原因很難做到實(shí)時(shí)更新和同步。

使用Lottie的注意事項(xiàng)：

1. lottie不支持任何形式的表達(dá)式；
2. mask/軌道遮罩 會(huì)很大程度上影響lottie在安卓上的性能；
3. AE本身不支持內(nèi)外描邊，所以lottie只能導(dǎo)出中心描邊；
4. mask-反轉(zhuǎn)遮罩，這個(gè)功能在最終輸出并不支持；
5. 如果動(dòng)畫中涉及到大量位圖，會(huì)影響最終的性能；
6. 不支持圖層效果以及各類AE效果和濾鏡；
7. 在不影響動(dòng)畫的前提下，盡量減少圖層的數(shù)量；
8. Bodymovin自帶的預(yù)覽功能很多時(shí)候并不是實(shí)際效果，實(shí)際測(cè)試一下（可以利用Framer進(jìn)行實(shí)際測(cè)試），可以減少很多與工程師后期的溝通；
9. lottie更新特別頻繁，高版本對(duì)android版本有較高的要求；
10. 輸出json的時(shí)候盡量把合成大小裁剪到與你的動(dòng)畫剛好適應(yīng)的大小，這樣對(duì)開發(fā)人員有利；
11. 如果必須需要用到位圖，在輸出位圖之后，圖片最好壓縮處理一下；
12. 軌道遮罩和蒙版雖然效果上是類似的，但是在Lottie的導(dǎo)出上是不一樣的，所以選用軌道遮罩；
13. 關(guān)于3D旋轉(zhuǎn)和Z軸的位置，Lottie Web支持3D旋轉(zhuǎn)，但在Android上這個(gè)動(dòng)畫是完全不生效的，而Z軸的設(shè)置是在兩個(gè)平臺(tái)是不生效的；
14. 盡可能的減少關(guān)鍵幀，可以多使用父子級(jí)的方式而不是在每一個(gè)圖層上都添加一遍關(guān)鍵幀；
15. 避免使用路徑關(guān)鍵幀，因?yàn)槭褂煤髸?huì)創(chuàng)建一個(gè)非常大的文檔；
16. 空?qǐng)D層可以使用，但為了讓它正常工作，我們需要將可見打開，并將透明度設(shè)置為0。

7）AE2CSS

這是一款A(yù)E插件，他是將AE的效果以CSS代碼的形式進(jìn)行導(dǎo)出，理論上支持AE的所有效果，并且輸出的動(dòng)畫質(zhì)量高內(nèi)存占用極小，而他的實(shí)現(xiàn)原理是將基礎(chǔ)屬性動(dòng)畫直接轉(zhuǎn)換成代碼，復(fù)雜效果轉(zhuǎn)為雪碧圖，并將兩者結(jié)合在一起合并輸出成一套文件。

雖然輸出質(zhì)量高且內(nèi)存占用極小，但是他只能夠應(yīng)用在Web和H5當(dāng)中。

注意：目前只能導(dǎo)出純色層和位圖的位移、旋轉(zhuǎn)、縮放、透明度動(dòng)畫，并且支持表達(dá)式和父子級(jí)。

8）SVGA

是類似于lottie的另一種文件輸出格式，是一種同時(shí)兼容 iOS / Android / Flutter / Web 多個(gè)平臺(tái)的動(dòng)畫格式。更是目前禮物動(dòng)效領(lǐng)域的主流應(yīng)用格式，我們可以使用AE插件 SVGAConverter 輸出SVGA格式的文件，在使用SVGA時(shí)也是需開發(fā)調(diào)用第三方庫(kù)的。

雖然他比lottie占用的內(nèi)存更高一些，支持的屬性也更少，但是它具有更強(qiáng)的兼容性和穩(wěn)定性。他與lottie的區(qū)別在于記錄動(dòng)畫的方式不同，lottie是按照AE中的關(guān)鍵幀及緩動(dòng)的結(jié)合體進(jìn)行記錄。

所以有對(duì)緩動(dòng)曲線解析差帶來(lái)的性能問(wèn)題和穩(wěn)定性問(wèn)題，而SVGA則是通過(guò)逐幀的記錄方式，類似序列幀，但資源可復(fù)用，所以占用內(nèi)存更小。

9）VAP

VAP全稱Video Animation Player，是由企鵝電競(jìng)開發(fā)的一種用于播放酷炫動(dòng)畫的實(shí)現(xiàn)方案。他具有比Webp和Apng更高的壓縮率，也就是素材體積變得更小了，而且采用硬件解碼，使解碼速度更快。并且解決了Lottie和SVGA支持AE效果有限的問(wèn)題。

充電時(shí)刻：什么是硬解和軟解？

硬解就是硬件解碼，是將原來(lái)全部交由CPU來(lái)處理的視頻數(shù)據(jù)的一部分交由GPU來(lái)做，而GPU的并行運(yùn)算能力要遠(yuǎn)遠(yuǎn)高于CPU，這樣可以大大的降低對(duì)CPU的負(fù)載。而軟解就是軟件解碼，是指利用軟件讓CPU來(lái)進(jìn)行解碼。我們常用到的Lottie、GIF、Apng、Webp等都是軟件解碼，MP4和VAP則是硬件解碼。

10）第三方動(dòng)效庫(kù)

第三方動(dòng)效庫(kù)有很多，但是由于非官方維護(hù)存在諸多的不確定性因素，所以如果要使用第三方庫(kù)還需要慎重考慮，下面列舉一些動(dòng)效的第三方庫(kù)供參考使用：

當(dāng)然還有一些在線的動(dòng)效設(shè)計(jì)工具，例如：犸良、Rive、Flutter、Lotter-Editor等等。

11）PAG

PAG全稱 Portable Animated Graphics 一個(gè)聽起來(lái)有些陌生的格式，他是由鵝廠研發(fā)，目前還沒(méi)有還沒(méi)有覆蓋全平臺(tái)，他不僅提供AE導(dǎo)出插件，還有桌面端的預(yù)覽工具和各端跨平臺(tái)渲染SDK。

PAG對(duì)文件的解碼速度更快壓縮率更高，而且PAG桌面端預(yù)覽工具還提供了性能檢測(cè)功能，能夠直觀的幫助我們對(duì)性能問(wèn)題進(jìn)行優(yōu)化。不僅如此，PAG還能夠動(dòng)態(tài)修改替換文本和圖片等資源。

手動(dòng)標(biāo)注VS自動(dòng)標(biāo)注…

原文鏈接：https://www.ui.cn/detail/582355.html

作者：Coldrain1，公眾號(hào)「CD動(dòng)效研究院」

本文由 @Coldrain1 發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議