寫給新手的Lottie指南（上篇）

前言

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

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

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

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

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

1。背景介紹

1。1 背景簡介

官方：Lottie是Airbnb推出的一個免費開源動畫庫，適用於Web/Android/iOS/Windows。它可以把bodymovin（AE外掛）匯出的json檔案解析成動畫，並且在各平臺上進行呈現。

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

1。2 原理解析

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

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

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

1。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“

首選項

”——“

指令碼和表示式

”中，勾選“

允許指令碼寫入檔案和訪問網路

”。外掛就可以正常使用了，如果之前設定過請忽略。

2。介面介紹

2。1 常規介面

2。2 設定介面

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

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

3。預覽介紹

Lottiefiles：https：//lottiefiles。com

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

3。1 常規介面

將檔案拖入到網站任意介面就可以喚起預覽視窗，預覽有兩種方式，一種是直接拖拽，一種是複製連結。當動畫不包含點陣圖或者點陣圖已經置入進json中，則可以直接把json檔案拖入視窗。如果動畫包含點陣圖，匯出動畫時會再多生成一個存放點陣圖的images資料夾。預覽帶點陣圖的動畫，需要將json和images資料夾壓縮成zip包，拖入進視窗。PS：除了json和zip，拖入的方式還支援dotLottie格式，該格式是Lottiefiles推出的一種官方格式，但json更為常見，所以在此處只做瞭解。

另一種方式是複製連結到輸入框，也可以進行預覽。我們在Lottiefiles官網的發現（Discover）中，可以找到很多免費的動畫。複製“Lottie Animation URL”中的連結到預覽視窗，就可以進行預覽以及後續的動畫編輯功能，不過這種方式，只針對公開的動畫。如果是未公開的動畫，複製預覽視窗中的“Asset Link”的連結也可以在其他裝置的Lottiefiles（各個端或者外掛）上進行預覽和編輯。