今天給大家分享在可視化設(shè)計(jì)中，最常用的動(dòng)效落地方案介紹，這一次是一個(gè)非常非常干的干貨，手把手教你如何配合開發(fā)將小動(dòng)效在頁(yè)面中展示出來(lái)。希望可以帶給大家更多幫助！

前言

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

常見的開發(fā)對(duì)接方式

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

GIF

Gif 是現(xiàn)有市面上應(yīng)用最廣泛的動(dòng)效格式了，最早起始于 1987 年 由 CompuServe 公司引入。

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

1. 通過 ae 導(dǎo)出 png 序列或者 mov 視頻 拖入 ps 導(dǎo)出

2. Adobe Media Encoder（需要跟 ae 版本一致就可以軟件聯(lián)動(dòng)直接導(dǎo)出 gif）
3. AEscripts GifGun 是一款可以直接在 AE 里一鍵創(chuàng)建輸出 GIF 動(dòng)畫格式腳本

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

PNG 序列

由 PNG 圖片組成的序列幀。
優(yōu)點(diǎn)：兼容性非常好、效果還原高、顏色豐富。
缺點(diǎn)：文件比較大，動(dòng)效比較復(fù)雜的話輸出 png 序列可能好幾百?gòu)?，?huì)影響瀏覽器性能。
輸出：可 ae 等動(dòng)效軟件直接輸出。

APNG

APNG 是一個(gè)基于 PNG 的位圖動(dòng)畫格式，它的動(dòng)圖后綴依然是.png。
優(yōu)點(diǎn)：顏色豐富，支持 1600 萬(wàn)種顏色，支持漸變透明，無(wú)損壓縮。
缺點(diǎn)：文件過大，兼容性差受瀏覽器、系統(tǒng)版本等限制。
在 web 端對(duì)于主流的瀏覽器 Firefox、Safari、Chrome 都能夠兼容。
輸出：

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

2. AE BX-WebpApngExporter 插件

Lottie

Lottie 是 Airbnb 開源的一套跨平臺(tái)的完整的動(dòng)畫效果解決方案，用 AE 做完動(dòng)畫后，使用 Lottie 提供的 Bodymovin 插件將導(dǎo)出成 JSON 格式，就可以直接運(yùn)用在 Web 上，無(wú)需其他額外操作。

優(yōu)點(diǎn)：文件小、顏色豐富，開發(fā)可以控制大小、速度、循環(huán)次數(shù)等參數(shù)。
缺點(diǎn)：不支持漸變、粒子、陰影透視等效果，表達(dá)式也只支持一部分，部分位圖文件輸出的效果失真，需手動(dòng)替換。
輸出：使用: AE 菜單欄窗口 – 擴(kuò)展 — Bodymovin — 導(dǎo)出.json文件

設(shè)置選項(xiàng)里了選擇輸出一個(gè) Html 的本地文件，可打開進(jìn)行預(yù)覽

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

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

SVGA

SVGA 是一種同時(shí)兼容 iOS / AndROId / Flutter / Web 多個(gè)平臺(tái)的動(dòng)畫格式。
優(yōu)點(diǎn)：便捷 SDK 開發(fā)集成步驟輕松簡(jiǎn)單。支持大部分效果、體積小、動(dòng)畫還原效果好
缺點(diǎn)：有損壓縮，兼容性不太好有的平臺(tái)不支持，移動(dòng)端用的居多
輸出：ae 選擇 菜單 > 窗口 > 擴(kuò)展 > SVGAConverter

MP4

MP4 是一種常用的視頻格式，也通常運(yùn)用于直接對(duì)接開發(fā)。
優(yōu)點(diǎn)：兼容性好，文件能夠快速輸出，文件小。
缺點(diǎn)：視頻格式項(xiàng)目中過多的話影響性能，效果會(huì)有壓縮。
輸出：Adobe Media Encoder（需要跟 ae 版本一致就可以軟件聯(lián)動(dòng)直接導(dǎo)出 MP4），ae 中菜單-合成-添加到 Adobe Media Encoder 隊(duì)列，直接可以輸出 MP4 文件。

最后

以上介紹的幾種動(dòng)效落地方案，是目前比較主流的方法， 基本可以滿足產(chǎn)品中動(dòng)效落地，而且能夠大大節(jié)省開發(fā)的時(shí)間和產(chǎn)品的穩(wěn)定性。

作者：小六可視化設(shè)計(jì)