前言

作為 UI 設計師，我們在平時的工作中，多多少少都會接觸到一些動效相關的工作內容。而談到動效的落地，我想 Lottie 這種方案是一定不能繞過去的。因為它推出的時間較早并且不斷在更新迭代，網上可以找到很多相關的文章和教程，也方便我們進行了解和學習。雖然它不能實現光效、粒子這類的復雜的效果。但并不妨礙它仍然可以作為 UI 動效輸出的重要選項。

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

我們接手不同的項目時，設計上要達成的目標以及實現中遇到的限制，都是不同的。各種工具之間都有不同的特點和優劣勢，如果我們深入了解它們并做出一一對比，一定會找到適合這個項目的最優解。

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

我們在學習 Lottie 的過程，一定會碰到兩個難點，一個是設置項，一個是功能支持列表。設置項需要我們能了解一些開發相關理論知識，功能支持則需要我們根據限制條件在不同項目中靈活運用。如果我們能掌握這兩個部分，動畫效果的上限是非常高的。上篇的內容更偏理論基礎，主要為大家介紹界面相關內容，里面包含設置項的介紹。在下篇，我會根據實際動畫案例，來為大家介紹一下 Lottie 的功能支持以及如何靈活的運用它們。

背景介紹

1. 背景簡介

官方：Lottie 是 Airbnb 推出的一個免費開源動畫庫，適用于 Web/Android/iOS/Windows。它可以把 bodymovin（AE 插件）導出的 json 文件解析成動畫，并且在各平臺上進行呈現。

Lottie 是以一位德國電影導演和剪影動畫的最重要先驅 Lotte Reiniger（洛特·雷妮格）的名字命名的。她的著名作品《艾哈邁德王子歷險記》（1926 年）——現存最早的長篇動畫電影。

2. 原理解析

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

在實現的層面上講，Lottie 是一個研發人員使用的動畫庫（各個平臺都有自己的庫）。如何理解庫，簡單舉例，比如說現在有一串" 16,12"的數據，當用位置的規則來解析它，就成了位置信息 X16，Y12。當用寬高規則來解析它，就成了尺寸信息 W16，H12。能解析" 16,12"這串數據的規則可以有很多種，將這些所有的規則都整合在一起，就形成了一個庫。

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

3. 工具特點

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

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

（因為功能支持列表所包含項目很多且在持續更新中，可能整理出一張列表后又會面臨后續功能的改變，所以我們在學習 Lottie 規范的時候應該多去查閱官方給出的功能支持文檔，并且結合自己項目實際的情況去理解。在下篇，我會分享功能列表的常用項，以實際案例為大家做演示）

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

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

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

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

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

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

界面介紹

1. 常規界面

2. 設置界面

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

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

預覽介紹

Lottiefiles： https://lottiefiles.com

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

1. 常規界面

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

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

2. 編輯動畫

在下篇，我會為大家介紹一下 Lottie 的功能支持以及如何靈活的運用它們。之后也會分享一些 lottie 實際動畫案例。原創不易，如果喜歡這篇文章，請點贊收藏加關注哦^_^