大家好，我是小六。今天給大家分享在可視化設計中，最常用的動效落地方案介紹，這一次是一個非常非常干的干貨，手把手教你如何配合開發將小動效在頁面中展示出來。希望可以帶給大家更多幫助！

前言

最近在做項目中遇到一些問題，有些效果開發實現出來跟實際相差較大、被產品拿著設計稿戲稱為買家秀、賣家秀的區別。還會有些情況是因為項目排期問題開發落地有一定成本，希望能快速落地。還有的開發直接說搞不了等等。借這次整理一下動效落地過程中遇到的坑，同事展開聊一下設計師對接前端做動效落地的一些最常用的方法，最后會把文中提到的插件軟件整理打包分享給大家。

常見的開發對接方式

1. GIF
2. PNG 序列
3. APNG
4. Lottie
5. SVGA
6. MP4

GIF

Gif 是現有市面上應用最廣泛的動效格式了，最早起始于 1987 年 由 CompuServe 公司引入。

優點：兼容性好幾乎所以瀏覽器都支持、文件能夠快速輸出。
缺點：顏色僅支持 8 位 256 顏色，支持半透明、顏色有限導出文件體積大而且有鋸齒，效果差透明導出會有白邊。
輸出：GIF 文件有多種輸出方法這里給大家羅列比較常用的，大家按需使用。

1. 通過 ae 導出 png 序列或者 mov 視頻 拖入 ps 導出

2. Adobe Media Encoder（需要跟 ae 版本一致就可以軟件聯動直接導出 gif）
3. AEscripts GifGun 是一款可以直接在 AE 里一鍵創建輸出 GIF 動畫格式腳本

GIF 壓縮的方法可以看這篇：

PNG 序列

由 PNG 圖片組成的序列幀。
優點：兼容性非常好、效果還原高、顏色豐富。
缺點：文件比較大，動效比較復雜的話輸出 png 序列可能好幾百張，會影響瀏覽器性能。
輸出：可 ae 等動效軟件直接輸出。

APNG

APNG 是一個基于 PNG 的位圖動畫格式，它的動圖后綴依然是.png。
優點：顏色豐富，支持 1600 萬種顏色，支持漸變透明，無損壓縮。
缺點：文件過大，兼容性差受瀏覽器、系統版本等限制。
在 web 端對于主流的瀏覽器 Firefox、Safari、Chrome 都能夠兼容。
輸出：

1. 通過 iSparta 軟件導出。操作步驟是將 png 序列拽到 iSparta 軟件中點擊開始即可導出 apng，此軟件一共可以導出三種格式，APNG/GIF/WEBP

2. AE BX-WebpApngExporter 插件

Lottie

Lottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案，用 AE 做完動畫后，使用 Lottie 提供的 Bodymovin 插件將導出成 JSON 格式，就可以直接運用在 Web 上，無需其他額外操作。

優點：文件小、顏色豐富，開發可以控制大小、速度、循環次數等參數。
缺點：不支持漸變、粒子、陰影透視等效果，表達式也只支持一部分，部分位圖文件輸出的效果失真，需手動替換。
輸出：使用: AE 菜單欄窗口 - 擴展 — Bodymovin — 導出.json文件

設置選項里了選擇輸出一個 HTML 的本地文件，可打開進行預覽

bodymovie 插件下載地址： https://github.com/bigxixi/bodymovin_cn

bodymovin 需要這個安裝器才能安裝，推薦 zxp 安裝器下載地址 https://zxpinstaller.com/

SVGA

SVGA 是一種同時兼容 iOS / Android / Flutter / Web 多個平臺的動畫格式。
優點：便捷 SDK 開發集成步驟輕松簡單。支持大部分效果、體積小、動畫還原效果好
缺點：有損壓縮，兼容性不太好有的平臺不支持，移動端用的居多
輸出：ae 選擇 菜單 > 窗口 > 擴展 > SVGAConverter

MP4

MP4 是一種常用的視頻格式，也通常運用于直接對接開發。
優點：兼容性好，文件能夠快速輸出，文件小。
缺點：視頻格式項目中過多的話影響性能，效果會有壓縮。
輸出：Adobe Media Encoder（需要跟 ae 版本一致就可以軟件聯動直接導出 MP4），ae 中菜單-合成-添加到 Adobe Media Encoder 隊列，直接可以輸出 MP4 文件。

最后

以上介紹的幾種動效落地方案，是目前比較主流的方法， 基本可以滿足產品中動效落地，而且能夠大大節省開發的時間和產品的穩定性。

歡迎關注作者微信公眾號：「小六可視化設計」