前言

作為 UI 設(shè)計(jì)師，我們在平時(shí)的工作中，多多少少都會(huì)接觸到一些動(dòng)效相關(guān)的工作內(nèi)容。而談到動(dòng)效的落地，我想 Lottie 這種方案是一定不能繞過去的。因?yàn)樗瞥龅臅r(shí)間較早并且不斷在更新迭代，網(wǎng)上可以找到很多相關(guān)的文章和教程，也方便我們進(jìn)行了解和學(xué)習(xí)。雖然它不能實(shí)現(xiàn)光效、粒子這類的復(fù)雜的效果。但并不妨礙它仍然可以作為 UI 動(dòng)效輸出的重要選項(xiàng)。

剛接觸動(dòng)效輸出的同學(xué)，可能很喜歡根據(jù)當(dāng)下的項(xiàng)目，對比各種工具（例如 Lottie、SVGA、PAG 等）孰強(qiáng)孰弱，在心中做一個(gè)排名，選定一個(gè)工具作為今后動(dòng)效輸出的唯一方案。如果有這種工具，將大大降低設(shè)計(jì)和開發(fā)的成本，當(dāng)然是好事。但到目前為止，似乎還沒有發(fā)現(xiàn)這種唯一解。

我們接手不同的項(xiàng)目時(shí)，設(shè)計(jì)上要達(dá)成的目標(biāo)以及實(shí)現(xiàn)中遇到的限制，都是不同的。各種工具之間都有不同的特點(diǎn)和優(yōu)劣勢，如果我們深入了解它們并做出一一對比，一定會(huì)找到適合這個(gè)項(xiàng)目的最優(yōu)解。

如果能熟悉各種工具并能靈活運(yùn)用，那一定會(huì)大大提高我們的工作效率。而且通過了解各種落地方案，我們可以提前預(yù)料一個(gè)動(dòng)效大概能實(shí)現(xiàn)到什么程度，從而能在最開始就規(guī)劃好我們的動(dòng)畫該怎樣去設(shè)計(jì)。我想根據(jù)自己的項(xiàng)目經(jīng)驗(yàn)，為大家分享一下 Lottie、PAG、SVGA 的功能和特點(diǎn)。PS：GIF、APNG、WEBP 等方式相對比較傳統(tǒng)，文件體積較大，暫不列入討論的范圍內(nèi)。

我們在學(xué)習(xí) Lottie 的過程，一定會(huì)碰到兩個(gè)難點(diǎn)，一個(gè)是設(shè)置項(xiàng)，一個(gè)是功能支持列表。設(shè)置項(xiàng)需要我們能了解一些開發(fā)相關(guān)理論知識(shí)，功能支持則需要我們根據(jù)限制條件在不同項(xiàng)目中靈活運(yùn)用。如果我們能掌握這兩個(gè)部分，動(dòng)畫效果的上限是非常高的。上篇的內(nèi)容更偏理論基礎(chǔ)，主要為大家介紹界面相關(guān)內(nèi)容，里面包含設(shè)置項(xiàng)的介紹。在下篇，我會(huì)根據(jù)實(shí)際動(dòng)畫案例，來為大家介紹一下 Lottie 的功能支持以及如何靈活的運(yùn)用它們。

背景介紹

1. 背景簡介

官方：Lottie 是 Airbnb 推出的一個(gè)免費(fèi)開源動(dòng)畫庫，適用于 Web/Android/iOS/Windows。它可以把 bodymovin（AE 插件）導(dǎo)出的 json 文件解析成動(dòng)畫，并且在各平臺(tái)上進(jìn)行呈現(xiàn)。

Lottie 是以一位德國電影導(dǎo)演和剪影動(dòng)畫的最重要先驅(qū) Lotte Reiniger（洛特·雷妮格）的名字命名的。她的著名作品《艾哈邁德王子歷險(xiǎn)記》（1926 年）——現(xiàn)存最早的長篇?jiǎng)赢嬰娪啊?/p>

2. 原理解析

關(guān)于 lottie 的說法眾說紛紜。有人說是動(dòng)畫庫。有人說是動(dòng)畫輸出工具，有人說是動(dòng)畫落地的解決方案。這些說法雖然沒有問題，但是太籠統(tǒng)模糊，不太方便普通使用者的理解。那 lottie 到底是什么？

在實(shí)現(xiàn)的層面上講，Lottie 是一個(gè)研發(fā)人員使用的動(dòng)畫庫（各個(gè)平臺(tái)都有自己的庫）。如何理解庫，簡單舉例，比如說現(xiàn)在有一串" 16,12"的數(shù)據(jù)，當(dāng)用位置的規(guī)則來解析它，就成了位置信息 X16，Y12。當(dāng)用寬高規(guī)則來解析它，就成了尺寸信息 W16，H12。能解析" 16,12"這串?dāng)?shù)據(jù)的規(guī)則可以有很多種，將這些所有的規(guī)則都整合在一起，就形成了一個(gè)庫。

在工作流程中，設(shè)計(jì)師先通過 AE 里的 bodymovin 插件，把動(dòng)畫導(dǎo)出成 json 文件（json 文件里包含有很多類似“16,12”這樣的數(shù)據(jù)）。研發(fā)人員利用 lottie 的動(dòng)畫庫（包含有很多類似“位置”“寬高”這樣的解析規(guī)則）來解析 json 里的數(shù)據(jù)并且渲染成動(dòng)畫。所以動(dòng)畫庫的渲染過程和設(shè)計(jì)流程并沒有什么關(guān)系。對 Lottie 的進(jìn)一步解釋，只是希望普通使用者能清晰的理解 lottie 的工作原理。當(dāng)我們談?wù)撍臅r(shí)候，不管它有多少種叫法，只要我們理解它的原理就好了。

3. 工具特點(diǎn)

是比較早期的動(dòng)效輸出工具，國內(nèi)的動(dòng)效輸出工具如 svga、pag 等工具，在研發(fā)過程中都選擇對標(biāo) lottie 來進(jìn)行功能的設(shè)計(jì)與改進(jìn)。所以網(wǎng)上會(huì)找到很多關(guān)于 lottie 的文章和資料。這也方便使用者解決遇到的問題。lottie 支持純矢量/圖片兩種格式的輸出，也可以插入音頻。通過功能支持列表可以看出，lottie 支持的平臺(tái)很多，其中 web 端支持的最好，同時(shí)在矢量圖形的解析上擁有很好的表現(xiàn)。

AE 功能支持列表： http://airbnb.io/lottie/#/supported-features

（因?yàn)楣δ苤С至斜硭?xiàng)目很多且在持續(xù)更新中，可能整理出一張列表后又會(huì)面臨后續(xù)功能的改變，所以我們在學(xué)習(xí) Lottie 規(guī)范的時(shí)候應(yīng)該多去查閱官方給出的功能支持文檔，并且結(jié)合自己項(xiàng)目實(shí)際的情況去理解。在下篇，我會(huì)分享功能列表的常用項(xiàng)，以實(shí)際案例為大家做演示）

lottie 基于 AE 的工作原理，對其中的矢量圖形和原生動(dòng)畫（蒙版，軌道遮罩，父子級(jí)綁定等）有非常強(qiáng)的解析能力，千萬不要小瞧這一點(diǎn)，基于這種能力，可以配合前端，做到對動(dòng)畫中的各個(gè)元素進(jìn)行精確化控制，并且整個(gè)動(dòng)畫是矢量的（適配時(shí)就可以不用考慮屏幕分辨率）。如果對支持的功能有很深入的了解，是完全可以制作出動(dòng)效炫酷體積較小可交互的純矢量 lottie 動(dòng)畫。

bodymovin 下載地址： https://github.com/airbnb/lottie-web

zxp 文件的下載路徑為：在鏈接頁面中找到文件夾“build”——“extension”——“bodymovin.zxp”

就可以找到最新版本的 bodymovin 插件了。需要把插件安裝在 zxp 安裝器中。

zxp 下載地址： https://aescripts.com/learn/zxp-installer/

tips：首次在 AE 中安裝插件腳本，無論是哪個(gè)腳本，記得在 AE"首選項(xiàng)"——“腳本和表達(dá)式”中，勾選“允許腳本寫入文件和訪問網(wǎng)絡(luò)”。插件就可以正常使用了，如果之前設(shè)置過請忽略。

界面介紹

1. 常規(guī)界面

2. 設(shè)置界面

關(guān)于 Metadata 的猜想：該功能相對較新，之前沒有在項(xiàng)目中實(shí)際使用過。所以以下是關(guān)于該功能的猜想。如果有童鞋實(shí)際使用過該功能，歡迎交流溝通~

在測試的過程中發(fā)現(xiàn)可以通過該功能往 json 文件里傳很多參數(shù)進(jìn)去，這也就意味著研發(fā)在更改動(dòng)畫的時(shí)候可以調(diào)用這些參數(shù)。下圖僅以按鈕的不同交互狀態(tài)來舉例，未必合理但能大概說明使用方法。實(shí)際工作中使用的空間可能非常大。

預(yù)覽介紹

Lottiefiles： https://lottiefiles.com

Lottiefiles 是 Lottie 官方的動(dòng)畫預(yù)覽工具，涵蓋了非常多的平臺(tái)。除了常用的 web 端，還有移動(dòng)端(iOS 和安卓)和電腦端(Win 和 Mac)。而且在 AE、Figma 和 XD 中也有插件。web 端是比較常用的平臺(tái)，可以支持的效果最多，里面也包含了完整的預(yù)覽功能，其他平臺(tái)的預(yù)覽功能基本大同小異。所以在此處我們以 web 端的 Lottiefiles 來舉例。另外，如果動(dòng)畫需要在移動(dòng)端上實(shí)現(xiàn)，那么務(wù)必使用移動(dòng)端的 Lottiefiles 來預(yù)覽效果。

1. 常規(guī)界面

將文件拖入到網(wǎng)站任意界面就可以喚起預(yù)覽窗口，預(yù)覽有兩種方式，一種是直接拖拽，一種是復(fù)制鏈接。當(dāng)動(dòng)畫不包含位圖或者位圖已經(jīng)置入進(jìn) json 中，則可以直接把 json 文件拖入窗口。如果動(dòng)畫包含位圖，導(dǎo)出動(dòng)畫時(shí)會(huì)再多生成一個(gè)存放位圖的 images 文件夾。預(yù)覽帶位圖的動(dòng)畫，需要將 json 和 images 文件夾壓縮成 zip 包，拖入進(jìn)窗口。PS：除了 json 和 zip，拖入的方式還支持 dotLottie 格式，該格式是 Lottiefiles 推出的一種官方格式，但 json 更為常見，所以在此處只做了解。

另一種方式是復(fù)制鏈接到輸入框，也可以進(jìn)行預(yù)覽。我們在 Lottiefiles 官網(wǎng)的發(fā)現(xiàn)（Discover）中，可以找到很多免費(fèi)的動(dòng)畫。復(fù)制“Lottie Animation URL”中的鏈接到預(yù)覽窗口，就可以進(jìn)行預(yù)覽以及后續(xù)的動(dòng)畫編輯功能，不過這種方式，只針對公開的動(dòng)畫。如果是未公開的動(dòng)畫，復(fù)制預(yù)覽窗口中的“Asset Link”的鏈接也可以在其他設(shè)備的 Lottiefiles（各個(gè)端或者插件）上進(jìn)行預(yù)覽和編輯。

2. 編輯動(dòng)畫

在下篇，我會(huì)為大家介紹一下 Lottie 的功能支持以及如何靈活的運(yùn)用它們。之后也會(huì)分享一些 lottie 實(shí)際動(dòng)畫案例。原創(chuàng)不易，如果喜歡這篇文章，請點(diǎn)贊收藏加關(guān)注哦^_^