Lottie 動畫簡介

一。困境

做動畫難免會有類似的經歷：

Digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for reference

照著 GIF 圖/效果視頻去模仿，猜測動畫時長，手動創建貝塞爾曲線……反覆調整參數，一遍遍目測效果，最後發現：

存在很多細節差異
效果不夠細膩
由於兼容性等約束，有些效果沒法實現

好不容易實現了，還原度卻達不到要求。通常要麼設計師妥協，要麼坐一起再調個半天，改到對方滿意為止，結果調整細節耗費的時間比預想的多好幾倍，效果還是差強人意

有經驗的設計師會從 AE（Adobe After Effects）中粘出一些有用的信息，比如貝塞爾曲線參數、動畫時長……甚至能夠提供一些實現思路，但無論怎樣，照著視頻實現動畫就像臨摹，效果差異幾乎是不可避免的。仔細想想這個過程，動畫對設計師來說有不小的工作量，但工程師這邊似乎有更大的工作量，每個目標平台都有一份工作量，並且這些工作是一次性的，幾乎無法複用並且難以維護（從幾百行的並行、串行動畫序列中找出某個參數，給加個 0.1）

那麼，為什麼一幅畫完成之後還要臨摹幾遍呢？能否把 1 + N 的工作量縮減到 1 + 0.n，同時還保證效果高度還原呢？

二。探索

既然這幅畫已經完成了，就沒必要從零開始手工臨摹，可以利用工具從畫中提取出必要的信息，再拿到目標平台用這份信息重建動畫：

Now engineers can use exactly what the designer intended, exactly how it was made.

從而：

保證高還原度（直接從設計原稿取出的動畫參數，一定可靠）
縮減多端的 N 份工作量（讓基礎動畫代碼可高度複用，具體效果配置化）

就像之前有經驗的設計師會把動畫參數粘出來一樣，從設計稿中導出足夠多的必要信息就能確保還原度（exactly how it was made）

有了完備的動畫參數就可以進一步配置化，在目標平台解析這份配置數據，完成軌跡回放（重建動畫）。各平台實現業務無關的動畫基礎庫，業務層只需要要把配置數據輸入基礎庫，接下來由配置數據控制動畫效果、時序及其組合，這樣就能把 N 的業務層工作量縮減到 0.n

三。目標定位

Lottie 就是這樣的一種方案，想要縮減多端實現動畫的業務工作量（easily），同時保證動畫效果高度還原（high-quality）：

Easily add high-quality animation to any native app.

具體地：

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

適用於多端（iOS, Android, React Native 和 Web），能夠輕鬆愉快地實現 AE 動畫效果

Lottie allows engineers to build richer animations without the painstaking overhead of re-writing them.

跨平台的優勢在於減少多端重複工作，畢竟動畫效果的定義和實現是一件複雜且耗時的事情：

How difficult and time consuming it can be to re-create animations from scratch.

實際上也有類似的其它方案，比如 facebookincubator/Keyframes：

A library for converting Adobe AE shape based animations to a data format and playing it back on Android and iOS devices.

Keyframes 的局限性在於僅支持部分（交互響應方面的）AE 特性，而 Lottie 的目標是支持大多數 AE 特性：

Our goal is to support as many After Effects features as we possibly can, to allow for a lot more than simple icon animations.

支持的 AE 特性越多，對設計師的約束越少，這也是 Lottie 方案更受歡迎的原因之一

四。實現思路

            JSON
Bodymovin ----------> Lottie Player
            圖片資源

設計師用 AE 做好動畫後，通過 Bodymovin（AE 插件）導出 JSON 格式的 Lottie 動畫定義及相關圖片資源，輸出給 Android、iOS、ReactNative、Web 前端工程師，工程師調用對應平台的 Lottie Player 加載動畫資源，並控制動畫播放/暫停等

AE 插件部分負責把 AE 的動畫定義轉換成 Lottie 動畫定義，並輸出 JSON 文件，難點在於支持轉換更多的 AE 特性，以免設計師用起來束手束腳

播放器部分負責解析 Lottie 動畫定義，加載相關資源並利用平台支持的技術實現動畫效果，比如 Web 環境下預設通過 SVG 動畫來實現，可選 Canvas 繪製和 CSS 動畫實現

關鍵在於：

通用的動畫定義
各平台下支持該動畫定義的播放器

類似於 Java 的跨平台思路：平台無關的 class 文件 + 平台相關的 JVM 實現

五。lottie-web

airbnb/lottie-web 是 Web 環境的 Lottie Player，簡單的幾行代碼就能實現複雜的動畫效果，例如：

<div id="bm"> </div>

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
})

P.S. 具體效果見 Simple Bodymovin Demo

預設通過 SVG 實現（renderer: 'svg'），另外還支持 canvas 和 html，區別在於：

svg：動畫元素（形狀等）用 SVG 實現，動畫效果通過 SVG 動畫來做
canvas：通過元素用 Canvas 繪製，動畫效果通過 rAF 定時刷新重繪來實現
html：動畫元素用 SVG 實現，動畫效果通過 CSS 動畫來做

實際使用中发现，SVG 模式兼容性最好，HTML 模式下遮罩動畫存在圓角放大變方的問題

P.S. 關於 SVG 及其動畫，請查看 [SVG 基礎知識](/articles/svg 基礎知識/)

P.S. 更多詳細 API 見 Usage

引入 lottie-web 有兩種方式，要麼引 CDN 資源，要麼下載最新 release：

$ ls lottie-web-5.3.0/build/player/
lottie.js		lottie.min.js		lottie_light.js		lottie_light.min.js

其中，lottie_light.js（輕量版）僅支持 SVG 模式，且不支持 expressions

六。總結

Rax 的跨容器運行、Lottie 的跨端動畫……前端技術方案已經不再局限於前端領域，而是往上下游擴展，拉著設計師、客戶端兄弟、服務哥哥一起玩，比如：

Ant Design：前端 + 設計師
React Native：前端 + 客戶端兄弟
Backends For Frontends：前端 + 服務哥哥

通過上下游的橫向碰撞，沉澱產出能夠提高整體效率的方案，似乎成了一種必然趨勢