感謝支持ayqy我的訂閱號，每週義務推送1篇（only unique one）原創精品博文，話題包括但不限於前端、Node、Android、數學（WebGL）、語文（課外書讀後感）、英語（文檔翻譯）
若是以爲弱水三千，一瓢太少，能夠去 http://blog.ayqy.net 看個痛快 html
一.困境
作動畫不免會有相似的經歷：前端
Digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for referenceweb
照着GIF圖/效果視頻去模仿，猜想動畫時長，手動建立貝塞爾曲線……反覆調整參數，一遍遍目測效果，最後發現：express
存在不少細節差別json
效果不夠細膩canvas
因爲兼容性等約束，有些效果無法實現微信
好不容易實現了，還原度卻達不到要求。一般要麼設計師妥協，要麼坐一塊兒再調個半天，改到對方滿意爲止，結果調整細節耗費的時間比預想的多好幾倍，效果仍是差強人意前端工程師
有經驗的設計師會從AE（Adobe After Effects）中粘出一些有用的信息，好比貝塞爾曲線參數、動畫時長……甚至可以提供一些實現思路，但不管怎樣，照着視頻實現動畫就像臨摹，效果差別幾乎是不可避免的。仔細想一想這個過程，動畫對設計師來講有不小的工做量，但工程師這邊彷佛有更大的工做量，每一個目標平臺都有一份工做量，而且這些工做是一次性的，幾乎沒法複用而且難以維護（從幾百行的並行、串行動畫序列中找出某個參數，給加個0.1）app
那麼，爲何一幅畫完成以後還要臨摹幾遍呢？可否把1 + N的工做量縮減到1 + 0.n，同時還保證效果高度還原呢？svg
二.探索
既然這幅畫已經完成了，就不必從零開始手工臨摹，能夠利用工具從畫中提取出必要的信息，再拿到目標平臺用這份信息重建動畫：
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基礎知識
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：前端 + 服務哥哥
經過上下游的橫向碰撞，沉澱產出可以提升總體效率的方案，彷佛成了一種必然趨勢
參考資料
Introducing Lottie
Lottie
觀點｜螞蟻金服玉伯：咱們是如何從前端技術進化到體驗科技的？
本文分享自微信公衆號 - 前端向後（backward-fe）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。