随着技術革新，針對動效輸出的選擇變得越來越多，它們之間有哪些特點和優劣勢，而我們該如何在不同的設計場景和設計目标下找到最适合的輸出方式？

接下來我們就來深入地了解它們，并一一對比，隻要我們足夠了解它們，就可以找到适合不同項目的最優解并快速落地。

在了解動效落地方式的選擇之前，我們需要明白的第一件事是互聯網産品當中的動效分類，了解哪些動效是需要設計師去直接輸出給開發。

1.情感化動效

情感化動效偏向于感性層面，主要目的是增加我們産品的氣質和傳達情緒，增加産品的魅力值，比較常見的有 app 中的 loading 動畫，動态圖标等。

這些動效因為一般都是獨立的，而且大部分複雜度過高，開發代碼實現需要花費大量的時間，所以情感化動效一般都是設計師直接輸出成開發可以直接嵌入到代碼裡的格式。

2.交互動效

不論可操作的交互原型，還是純做 demo 展示的動效過場都可以算作交互動效設計。

交互動效又可以細分為轉「場動效」和「微交互」，分别應用于頁面銜接和基礎組件的交互反饋。

與情感化動效不同，大部分交互動效都是采取的動效的基礎邏輯移動、縮放、透明度等，較為簡單，開發是可以直接代碼實現的，也能減少占用内存。

1.有效

優秀的動效設計不僅僅賦予了産品本身的調性和趣味，還能充分體現産品的定位和特點。

它的發生并非是讓用戶去在意動效的本身，而旨在讓用戶感知到它原本就是你産品的一部分，從而體現品牌的價值。

有效的動效提升操作感受并提供良好的視覺效果，讓産品界面更具靈動性和帶入感，增強用戶對産品的認知和情緒的帶入感。

2.克制

随着技術革新，用戶對于産品細節的感知度和挑剔程度日益劇增，不少設計師熱衷于設計衆多的動畫效果，但是很多動效由于本身的複雜性和冗長的時間産生的拖沓，使得用戶産生不适，并失去産品的焦點。

所以設計師在設計動效時，應該更克制，做到最短最高效、輕快流暢的交互表達。

3.性能優先

一個優秀的動效起的作用應該是基于用戶的交互行為作出恰當的反饋，從而讓用戶更明确感知到發生了什麼，并把用戶的注意力吸引到正确的位置。

如果你的動效犧牲了産品本身的性能和響應時間，不僅起不了效果反倒影響了用戶體驗，如果沒有找到更加簡明輕快的解決方案，那麼我們更建議不要輕易加入動畫效果。

4.開發效率

開發是真正的動效“設計師”，越複雜的動效，開發難度越大。沒有誰能阻止設計師天馬行空，但是要推動項目的進行，一定要考慮開發效率。

對于最終實現的效果和完成的時間，這兩者要做好權衡，建議設計師着手設計之前，先和開發共同評估一下所需時間及成本。

1.動效尺寸

動畫輸出的尺寸越大，占用系統空間、性能就越大。但是産品包的容量始終有限，不能允許太大内存的動效存在。

另一方面，越大尺寸就需要耗費越大的設備計算，用戶也就需要更多的時間去等待。

2.動效時長

影響原因與上述尺寸類似，當圖片堆棧的時間變長，堆棧當中的圖片數量也會增加，動畫的占用内存相應也将變得更大。

3.動效複雜度

越複雜的動效，能提供我們選擇的輸出方式就越少，過于複雜的動效可能會導緻輸出的時候受到壓縮或者不支持，從而導緻落地效果不理想。

所以我們也要盡可能的減少動畫的複雜度，保留重點，去掉冗雜的細節。

你是不是在輸出動圖和開發對接的過程中，遇到過這些問題：導出的動圖模糊、資源太大、開發不支持動圖格式…

以下我總結了幾種常用的輸出格式，以及該如何選擇合适的動圖格式。

1.情感化動效輸出選擇

情感化動效與大部分交互動效不同，需要設計師輸出的動圖格式，開發嵌入，你所輸出的動圖質量很大一部分就代表着産品上線的最終成果。

所以選擇對的輸出格式非常重要，常見的有六種輸出格式，位圖方式：PNG序列幀、APNG、GIF；矢量方式：Lottie、SVG動畫；視頻格式：MP4。

·GIF

·MP4

·序列幀

·APNG

·SVGA

·Lottie

(1)GIF

GIF 支持安卓、iOS、網頁，可以說也是比較常用的格式之一。

界面設計中的小元素可以使用這個格式，比如按鈕動畫、圖标動畫等，資源不會太大。

優點：兼容性好幾乎所以浏覽器都支持、文件能夠快速輸出。缺點：顔色僅支持 8 位 256 顔色，支持半透明、顔色有限導出文件體積大而且有鋸齒，效果差透明導出會有鋸齒。

像我們之前負責的四川航空，開發還沒有支持 Lottie，所以頁面下拉動畫輸出 GIF 給開發實現，壓縮後資源 300KB。雖然動圖放大周圍有鋸齒，但是在手機上是看不到的。

導出方法有三種：

1）AE 導出 MOV 格式，再用 PS 轉換成 GIF。（注意：可能會因為動畫時間太長、文件太大等等問題導出經常失敗，所以大尺寸或者過于複雜的動效不建議使用此方式)

2）AE安裝 Gifgun 插件，直接導出。

3）下載iSparta軟件，用AE導出 PNG 序列，将PNG序列圖片全選拖進 iSparta，勾選 GIF 點擊開始即可。

(2)MP4

MP4 是一種常用的視頻格式，也通常運用于直接對接開發。

優點：兼容性好，文件能夠快速輸出缺點：視頻格式項目中過多的話影響産品性能，可能會被壓縮，導緻最終呈現效果不太好。

MP4的格式已經很少在用，除非開發那邊特殊要求，一般都是大屏的背景動效或者示意動效才會用到MP4的格式。

像我們負責的川威集團數據大屏項目，其中場景切換效果是遵循開發的要求輸出的MP4格式，整屏的示意動效也是輸出的MP4格式方便開發和客戶查看。

輸出方式采用Adobe的Media Encoder（需要跟 ae 版本一緻就可以軟件聯動直接導出 MP4）即可，ae 中菜單-合成-添加到 Adobe Media Encoder 隊列，直接可以輸出 MP4 文件。

(3)序列幀

PNG序列幀就是輸出動圖的每一幀圖片，然後交付開發，按幀播放圖片實現。

相對比GIF，PNG序列幀可以更好的輸出透明背景的動畫，不會像GIF那樣産生邊緣鋸齒。

優點：兼容性非常好、效果還原度高、顔色豐富。缺點：文件比較大，動效比較複雜的話輸出 png 序列可能好幾百張，會影響浏覽器性能。

比如我們去年做過的精典汽車小程序中的加載動畫，就有将近200張png，如果稍微複雜一點的動畫導出序列幀資源就會很大，所以慎用這種格式。

輸出方式可以通過AE等動效軟件直接輸出。

(4)APNG

APNG 是基于 PNG 格式的位圖動畫格式圖片，文件後綴依然是.png，可以在浏覽器中預覽動畫。

同樣，和GIF對比，它的動圖邊緣光滑，不會有鋸齒和顆粒感，和PNG序列幀對比，它占用的資源大小更小，質量也比PNG序列幀更好，相當于PNG序列幀的優化版。

優點：顔色豐富，支持 1600 萬種顔色，支持漸變透明，無損壓縮。缺點：文件過大，兼容性差受浏覽器、系統版本等限制。

在 web 端對于主流的浏覽器 Firefox、Safari、Chrome 都能夠兼容。

拿川航下拉加載動畫做對比，可以很明顯的看到GIF的顆粒感和邊緣鋸齒，而APNG無顆粒感，邊緣也很光滑。

（因此對比圖被轉成了GIF上傳上來的，所以APNG可能會看到非常微弱的顆粒感，這是GIF格式的問題）

導出方法是通過 iSparta 軟件導出或者使用其它AE插件。繼續拿iSparta來舉例操作步驟是将 png 序列拽到 iSparta 軟件中點擊開始即可導出 apng，此軟件一共可以導出三種格式，APNG/GIF/WEBP。

(5)Lottie

Lottie 可以說是近兩年在動畫輸出方面不得不提的一個格式，它由 Airbnb 推出，并且迅速在國内外各種大小廠快速推廣開來，目前已經是一個非常普遍常用的格式，他在 AE 中的插件叫 Bodymovin。

他的原理是把我們的各種矢量元素、位圖圖層以及他們的效果關鍵節點打包的形式行成一個 json 格式的文件，就可以直接運用在 Web 上，無需其他額外操作。

優點：文件小、顔色豐富，開發可以控制大小、速度、循環次數等參數。缺點：不支持漸變、粒子、陰影透視等效果，表達式也隻支持一部分，部分位圖文件輸出的效果失真，需手動替換。

比如我們做過的五糧液防僞APP中的提示動畫，它的主要動态效果就是移動、縮放、透明度，所以使用的 Lottie 方式實現，資源小，動圖也很清晰。

輸出方式的話，AE 安裝 bodymovin 插件，就可以直接導出。（注意：要選擇保存路徑，導出按鈕才能點擊。點擊設置圖标，選擇 Standard 和 Demo，才能導出 json 文件和 demo 預覽效果）

(6)SVGA

針對 Lottie 對緩動曲線解析差帶來的性能問題和穩定性問題，我們會有第二種備選方案是 SVGA。

不管是導出之後的内存占用，還是在各個端的表現穩定性都會好很多，但是它的兼容性也會比 Lottie 少一些。

SVGA 是由 YY 團隊開發出來的一種跨平台的開源動畫格式，同時兼容 iOS / Android / Flutter / Web 多個平台的動畫格式，常用于較為複雜的動效。

因為效果比較複雜，一般是用 png 序列，一張圖一幀地制作動畫，輸出 SVGA 文件。它隻會生成一個 svga 後綴文件，代碼和位圖元素都被集成在了一起，但是 Lottie 會生成兩個文件：json 代碼文件 img 文件夾。

優點：便捷 SDK 開發集成步驟輕松簡單。支持大部分效果、體積小、動畫還原效果好缺點：有損壓縮，兼容性不太好有的平台不支持，移動端用的居多，不支持圖層漸變和插件特效

輸出方法是使用AE的SVGAConverter插件，打開SVGAConverter插件後選擇輸出路徑，然後點擊開始轉換即可。

2.交互動效輸出

前面說過了，大部分交互動效都是需要開發自己代碼實現的，那我們該如何讓開發知道我們設計的交互動效是怎麼動的，需要如何實現呢？怎樣才能将自己精心設計的動态效果，準确的傳達給工程師，避免實現的偏差呢？

對于動效來說，憑空描述永遠是隔靴搔癢，将自己心中的設計最快速的可視化，是實現的第一步。

(1)視頻Demo

視頻Demo是個不錯的開始，一段可以反複播放并在大部分設備上均可觀看的視頻，是讓别人快速理解自己想法的最佳媒介。

一些簡單的交互動效，開發可以觀看你的視頻Demo後根據自己的經驗直接代碼實現，并且保持較好的一個還原度。

比如一些簡單的均速旋轉或者移動，直接輸出MP4格式即可，開發可以拖動進度條去觀察細節。

(2)參數文檔

如果是較為複雜或者有緩動效果的動效，我們就不能單單指望開發憑借自己的經驗就能代碼實現并且擁有很好的一個還原度了，這個時候我們就需要給予開發具體的數值，以保證落地後的一個還原度。

動效參數文檔，裡面包括了時間、運動距離，縮放、透明度、運動曲線等等，其中的運動曲線就是我們最為重要的數值，這是保障我們動效落地後擁有緩動效果，接近于真實運動軌迹的重要數值。

盡管開發者的編輯器提供了相當多的基本運動曲線，但要想高度還原Demo中的流暢度，最終還是要依靠自定義曲線，也就是由自己賦予參數。

通常的做法是，在AE中設計好動效後，進入貝塞爾曲線編輯器“拉出”差不多的曲線交給開發人員。

然而這其中依然有不可調和的因素，手工“拉出來”的曲線，隻能無限接近Demo中的運動曲線。

這個時候就需要用到一款AE插件-Flow，Flow擴展是一款AE自定義動畫曲線調節工具，包含25種關鍵幀曲線效果，可自定義修改編輯，還可自定義保存自己調整的預設，當然，最重要的就是我們可以直接獲取到我們的曲線數值，從而交給開發，保障落地的還原性。

解決了最重要的運動曲線的具體數值，剩下的就簡單，把開發所需要的數值，整理成表格文檔交付給開發即可。

這隻是個示例，具體表格文檔是以什麼樣式呈現，具體需要展現哪些數值，可以自己根據需求與開發溝通決定。

當然，如果項目時間充裕的話，視頻Demo 參數文檔兩者結合，肯定是最佳的解決方案，保證落地的還原性。

最後，我們來總結一下在實際工作中我們該如何選擇輸出格式。

Lottie：除了一些特殊效果不支持之外，基本适合所有 UI 動效，質量高，占存小，優先考慮使用

GIF：會有顆粒感和邊緣鋸齒，但是兼容性高，移動端小元素動效可以使用，小圖鋸齒不明顯

APNG：相比較于GIF，無鋸齒和顆粒感，質量更好，但是占存比GIF高，兼容性也比GIF略差

SVGA：适合一些較為複雜的動效，占存小，質量高，但是兼容性略差，不支持一些AE特效

序列幀：資源太大，質量一般，但是輸出方式便捷方便，一般不建議使用

MP4：占存比GIF略高一點，質量一般，一般用于交互動效示意展示或是大尺寸的炫酷動畫

以上介紹的幾種動效落地方案，是目前大家用的比較多的方法， 掌握這幾種輸出方法，就基本可以滿足産品中動效落地，而且能夠大大節省開發的時間和産品的穩定性。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!