如何看待 Airbnb 新發布的 Lottie？

Lottie

---

謝邀。

這個開源庫今天刷了我所有的Android開發相關群，體驗了一下，動畫很流暢是真的，很看好未來的前景。說些鄙人目前的粗淺看法

• 內存佔用在AE生成的動畫里沒有使用Mask效果的時候非常優秀，從代碼上看，僅僅用Canvas去draw而已，流暢度非常棒，所以哪怕在Listview里去大量顯示，內存佔用和繪圖效率都遠遠高於幀動畫。基本上可以捨棄用GIF去做動畫的痛苦了。
• 由於是依賴於AE做的動畫，估計以後不只是要求UI設計師精通AE，連前端開發都需要會用AE了——別笑，9-patch格式圖片出了這麼多年，有幾個UI同學會做的？大部分公司還不是研發狗自己來弄……
• 期待一下以後加入更多交互動畫的支持，而不只是播放動畫（類似於拖拽等特效，當然我不熟AE，不知道是否可以直接AE做？）
• 寫前端業務代碼的同學生存空間又窄了一丟丟……以前「能實現複雜動畫」算是個賣點，現在Canvas draw的動畫很多都可以被這個庫取代了，感覺寫頁面現在如果不是熟悉OpenGL ES的話可能都不好意思說自己能實現高效的複雜動畫了（當然，高度交互需求的動畫目前還是很難被替代的）。
• 在動畫包含Mask時靠臨時生成bitmap做的動畫，性能有待提高。這部分貌似也有一些bug還有待解決。
• 瑕不掩瑜，這個思路非常不錯。

---

今天剛好粗略看了下源碼，簡單說一下這個庫。

一. Lottie 是什麼

首先這個庫是做什麼的？

通過 AE 上的 Bodymovin 插件將 AE 中製作好的動畫導出成一個 json 文件，Lottie 實現了 Android/iOS/React Native 三個平台對該 json 文件的解析和渲染。（Android 端項目地址為：airbnb/lottie-androidairbnb/lottie-android）

可能看到這裡你該有疑問了，那 Bodymovin 插件從何而來？

bodymovin 從項目介紹上看是一個個人庫，它的主要功能是將 AE 導出的動畫在 Web 端執行。所以 Airbnb 做的主要工作是將該項目擴展到移動端。

二. 優點

它最大的優點是提供了一套完整的跨平台的動畫實現工作流。

試想一下，以往要實現一個動畫，我們需要多端各自實現且動畫的複雜度受時間成本和開發者能力的約束。現在，通過這套流程我們可以將 AE 中的動畫很輕鬆得在 web 端、移動端顯示出來，這大大提高了動畫的開發效率及減輕工作量。

其次，相對於類似的實現方案GIF、手寫動畫、幀動畫而言，這個方案更為輕量，性能和存儲上都更佳。

從代碼上看，Android 端的實現是基於 Drawable、iOS 端是基於 Layer —— 最終都是對 canvas 的操作，中間除去解析 json 外，基本無耗費性能的行為。（官方文檔有提到，masks 和 mattes 動畫較為耗費性能，原因是需要額外的 Bitmap 輔助，這點需注意）

而存儲上，動畫由 json 文件描述，佔用空間不多。

也是因為動畫由 json 文件描述，所以它的第三個優點是動畫的更新及其方便。在之前，假如我們要完成動畫動態更新需求，要麼使用上述所說的 GIF、幀動畫等方案，要麼就自定義動畫描述文件或用笨重的xml來完成動畫。那麼現在用 json 文件，簡直再方便不過了。

三. 仍然存在的問題

1. Bodymovin 插件待完善，仍然有部分 AE 效果無法成功導出；

2. Lottie 對 json 文件的支持待完善，目前有部分能成功導出成 json 文件的效果在移動端上無法很好的展現；

3. 目前不支持文字，所有文字必須轉成矢量圖才能正常展現動畫；

4. 動畫無法被編輯，即移動端無法更改遠端下載到本地的動畫；

5. 文檔需要跟進。。現在的 json 文件內容看的好蛋疼。。根本沒法開開心心提 PR；

等等等。

話雖如此，以上這些問題都可以隨著時間的推移而解決，期待 Airbnb 的推進。

在睡前簡單答了下，有錯漏的地方還請指出~周末有空準備繼續研究下源碼，到時再更新。

---

測試了一下 Android工程師不是非常會用AE 就在uplabs找個幾個AE工程,在Android端還原程度有限，svg的表現比較好，但是這個思路還是非常NB的

---

長久以來設計師的越炫酷越好」與程序猿的「夠用就好」的矛盾在自定義動畫上體現的尤為明顯。我相信還原一個優秀動畫的過程中,二者的「撕逼」是無止盡地，一場「撕逼」下來雙方都是一肚子苦水，此處略去一本辭海... ...

作為一個設計師我「曾經」天真的想過，有沒有一鍵將動畫生成代碼的工作流。說真的我幻想了很久，最近似乎這個幻想慢慢地接近成真了！！雖然之前已經出現了squall、bodymoving（它已經很具有想像力了，但是今天的這個開源動畫庫，讓它的想像力成為了真正的生產工具）等工具，但都有其局限性，要麼平台限制，要麼動畫元素的局限性。

不過，一個革命性的開源動畫庫誕生了！

我們有了一個銜接設計與開發的新的工作流，它就是Airbnb 發布的 Lottie ！

Lottie 的使用流程很簡單，就是在AE中設計完成你的動畫後，通過bodymoving插件導出一份記錄動畫信息的JSON文件，然後開發人員使用 Lottie 的Android，iOS，React Native apps開源動畫庫讀取這份JSON文件。

工欲善其事必先利其器！

• Adobe AE CC 2017版本
• ZXP installer 一個AE插件與腳本安裝工具
• bodymovin 一個將AE合成轉換為記錄動畫信息的JSON文件的插件
• Lottie Android iOS React Native Lottie開源動畫庫

一一倒騰之後，就可以體會它的無窮魅力了，在朋友圈得知此消息後已經樂此不疲的折騰了好久了，以後再也不用導出gif圖了，以後做動畫似乎可以肆意揮霍自己的任性了？！

····················以下內容不定期更新····················

目前 Lottie開源動畫庫/bodymoving 支持的AE屬性

Keyframe Interpolation 關鍵幀插值

Linear Interpolation 線性（關鍵幀）插值

Bezier Interpolation 貝塞爾插值

Hold Interpolation 定格插值

Rove Across Time 漂浮插值（漂浮穿梭時間 ）

Spatial Bezier 空間插值

Solids 固態層

Transform Anchor Point 描點變換

Transform Position 位置變換

Transform Scale 縮放變換

Transform Rotation 旋轉變換

Transform Opacity 透明度變換

Masks 蒙版

Path 路徑

Opacity 透明度

Multiple Masks (additive) 多個蒙版（疊加模式）

Track Mattes 遮罩模式

Alpha Matte 帶alaha通道的遮罩

Parenting 父子關係

Multiple Parenting 多級父子層

Nulls 空對象

Shape Layers 形狀層

Anchor Point 描點

Position 位置

Scale 縮放

Rotation 旋轉

Opacity 透明度

Path 路徑

Group Transforms (Anchor point, position, scale etc) 組變換

Rectangle (All properties) 矩形路徑（所有屬性）

Ellipse (All properties) 橢圓路徑（所有屬性）

Multiple paths in one group 一個組裡的多個路徑

Stroke (shape layer) 描邊（形狀層）

Stroke Color 描邊顏色

Stroke Opacity 描邊透明度

Stroke Width 描邊寬度

Line Cap 描邊端點（圓頭，平頭）

Dashes 描邊斷點

Fill (shape layer) 填充（形狀層）

Fill Color 填充顏色

Fill Opacity 填充透明度

Trim Paths (shape layer) 修剪路徑（形狀層）

Trim Paths Start 修剪路徑起點

Trim Paths End 修剪路徑終點

Trim Paths Offset 修剪路徑偏移

····················以上內容不定期更新····················

最後，希望Adobe和Airbnb能好好把它弄起來，我相信這個以後會成為銜接動效與開發的高效工作流之一！

以上

---

一直在用ae做動效，這兩天和工程師明哥一起試了下，覺得很好用。1、設計師做動效的自由度可以放的更開，畢竟後續落地成功率高了。2、降低開發成本，工程師原來需要幾天時間開發的動效，用這個方式就用了一小時，下面是一個簡單總結（帶動圖分享鏈接：http://www.zcool.com.cn/work/ZMjAxODU5NTI=.html）

---

手機碼字，簡單說下。

Native 展示動畫無非三種方式：

1. 純代碼實現：手動計算各種 bezier path，使用 SDK 提供的動畫機制實現動畫。這種方式的好處是靈活，由於是矢量計算，質量也高，如果恰當使用性能高、佔用資源少。缺點就是費程序員。

2. 雪碧圖（Sprite）：將動畫預渲染成圖片序列，然後一張一張以 30 / 60 fps 播放，就跟幻燈片一樣。優點是方便。缺點是資源佔用高，靈活度低。

3. GIF / MP4：這似乎是最差的方案了，不解釋了。

Lottie 採用的實際就是第一種方式，只不過這些 path 已經被 AE 插件預先算好了，然後由框架做插值，交給系統 SDK 提供的動畫框架渲染。很好地解決了費程序員的問題，還繼承了所有優點。

不過 Lottie 現在對 AE 文件本身要求比較高，有諸多限制，當然不是說一個 AE 動畫可以百分百地還原。不過總體來講還是很贊的！

---

安卓需要API14及以上，iOS需要iOS8及以上。

下面呈上支持的After Effects效果，其實只要你能做得出來，bodymovin就能幫你導出來，但導出的就不僅僅是一個json文件了。

這個庫沒有解決所有的問題，但是針對它能覆蓋的範疇而言可能是目前最優的選擇啦！

2017-2-13 更新---

bodymovin這個extension支持的範圍非常廣，然而lottie本身並不然啊！譬如說pre comp都不支持。做個ae項目不許我預合成多少會有點不順手。

只能期待不久的將來能支持吧。

---

xcode環境編譯沒什麼問題，官方demo也能跑，那個abc的文字效果，點快一點就會掛掉，ae太難用了，gu裝Bodymovin 插件裝了後提示升級最新版，所以轉換json一直不成功，插件也卸不了，程序的問題都很容易解決，ae難控制。浪費兩天在這上面了，希望指導文檔詳細點。特別是ae插件部分指導，整個adobe官方鏈接真是心塞

---

正在下載項目，準備實際體驗體驗，目前來看實現複雜動畫很簡單，比較期待

不過有一位大哥提交了Bug，當Activity/Fragment destroy後內存未被回收

---

完全不知道AE該如果製作動畫，看了教程也表示一臉懵逼，不過這個東西是真不錯。

---

這個庫的 大體思路和android原生動畫的思路其實是一致的，都支持用配置文件保存動畫參數，然後解析文件運行動畫。但是在兩者又存在一些明顯的差別 。不同點主要有以下兩方面：
1.解析動畫的種類數量不同，原生動畫解析支持的動畫主要有平移，旋轉，伸縮，透明度，錯切。至於path路徑mask遮罩等等這些都需要用svg圖像描述 或者代碼中自己實現。 而lottie中單獨對這部分寫了解析使用起來相對更簡易，支持的動畫種類更多。

2.配置文件的位置，原生動畫的配置文件位置固定，難以動態下發配置文件修改應用內的動畫，這一點lottie相比起來更有優勢。

3.支持的sdk版本不同，原生動畫中view動畫幾乎所有sdk版本都支持，屬性動畫api14以上支持（如果用外部庫ninneold的話可以支持到api9），而lottie支持api16以上。這對一些用戶量大的軟體而言其實是一道門檻，假如你有5000萬用戶，其中4.0(api14)的用戶佔了1%，那就是50萬用戶，這對企業而言就代表著利潤，你不支持他們，這些用戶就會被你的競品吸收掉，可謂是弱己強敵，因此大型的軟體估計短期內都不會使用這個動畫庫。

4.配置文件的規則不同，原生動畫的規則是android系統自己定義的，通過xml解析，而lottie的動畫直接採用Adobe的Affter Effect軟體里生成的json做為現成的約束，解析後再通過android代碼來實現。

除了以上的不同點之外，兩者也還有一些相同的問題。比如說path路徑動畫 Mask遮罩 在特定版本 以下對硬體加速都無法完美支持，開啟硬體加速之後會出現 將曲線繪製成空白矩形，或者黑屏的情況，我想lottie也一定會存在這些問題，因為他解析完數據後底層也是用android去實現的動畫繪製。

另外，AE軟體 思路其實和SVG是一致的，都是用描述語言去約束畫面，所以他們也會存在一些相同的問題和限制。 比如說svg圖往往更適合描述一些簡約的畫面，比如單純的線條類的幾何界面，如果圖片需要豐富的顏色細節，陰影，光照，那svg描述起來就非常費力了，而且體積會異常龐大，我相信 lottie在處理這種類型的動畫時也必然 力不從心。

---

體驗了一下，很流暢，安卓和ios可以用同一個json文件展示動畫。節約很多很多很多時間

---

開源後第二天，跟設計師配合了下，簡直神器啊。

比如之前做個APP啟動頁Logo動效，既簡單又好實現么就是UIView動畫，連續幀播放成動畫，代價都是動畫需要的圖片一多，體積就蹭蹭的往上漲。

體積要是不會大漲，就靠純代碼繪製，簡單的幾何動畫還勉強能行，稍微複雜一點的代碼實現根本難如登天。

現在有了這個，無論多複雜的動畫，設計師給開發者的就是一段JSON，之後事全由Lottie完成，在屏幕上就是添加一個View，簡直爽多了。

//屬性
@property(nonatomic,strong) LAAnimationView *lottieView;

//動效
self.lottieView = [LAAnimationView animationName:jsonName];


設計師AE出的效果有些沒有完全的實現，期待後續版本的更新

目前所支持的AE效果如下

Keyframe Interpolation 關鍵幀插值
Linear Interpolation 線性（關鍵幀）插值
Bezier Interpolation 貝塞爾插值
Hold Interpolation 定格插值
Rove Across Time 漂浮插值（漂浮穿梭時間 ）
Spatial Bezier 空間插值
Solids 固態層
Transform Anchor Point 描點變換
Transform Position 位置變換
Transform Scale 縮放變換
Transform Rotation 旋轉變換
Transform Opacity 透明度變換
Masks 蒙版
Path 路徑
Opacity 透明度
Multiple Masks (additive) 多個蒙版（疊加模式）
Track Mattes 遮罩模式
Alpha Matte 帶alaha通道的遮罩
Parenting 父子關係
Multiple Parenting 多級父子層
Nulls 空對象
Shape Layers 形狀層
Anchor Point 描點
Position 位置
Scale 縮放
Rotation 旋轉
Opacity 透明度
Path 路徑
Group Transforms (Anchor point, position, scale etc) 組變換
Rectangle (All properties) 矩形路徑（所有屬性）
Ellipse (All properties) 橢圓路徑（所有屬性）
Multiple paths in one group 一個組裡的多個路徑
Stroke (shape layer) 描邊（形狀層）
Stroke Color 描邊顏色
Stroke Opacity 描邊透明度
Stroke Width 描邊寬度
Line Cap 描邊端點（圓頭，平頭）
Dashes 描邊斷點
Fill (shape layer) 填充（形狀層）
Fill Color 填充顏色
Fill Opacity 填充透明度
Trim Paths (shape layer) 修剪路徑（形狀層）
Trim Paths Start 修剪路徑起點
Trim Paths End 修剪路徑終點
Trim Paths Offset 修剪路徑偏移

---

Web 有個叫 ? mo · js ? 的，我很喜歡，當時就想 iOS 要是有一個就好了。

做動畫現在終於可以解放開發者了。

---

這個複雜動畫也可以輕鬆搞定。使用簡單，一般幾行代碼加上json文件就可以搞定。Airbnb 動畫庫Lottie

---

如何在android端 多個不同尺寸 解析度的設備上跑 適配呢

---

我是通過我司的程序員了解到這個的，最近是我司新版本APP的測試階段，程序員們改bug累了的時候也會找尋的有意思的東西緩解一下。

感覺lottie很棒啊，以前從設計到實現總是會經歷很多調整，過程也比較累，現在就很輕鬆了，實現度也比較高。

前幾天和安卓校對設計界面的時候，他給我看了網易蝸牛讀書的開屏小動畫，說覺得這個挺有意思的，問我會做嗎。就是這個

這個不難啊，我用AE可以做，可是這個東西是咋實現呢，難道是導出個gif動圖？他告訴可以看下這個Bodymovin，然後用AE導出一個jason文件，他就可以輕鬆實現了。這個GitHub已經講解了5種可以安裝的Bodymovin插件的方法，我選擇的第二種，因為看上去就比較簡單直接，而且確實很簡單，很快就安裝好了。就是這種

需要注意的是，安裝好插件後，要AE軟體首選項&>常規中勾選允許腳本寫入文件和訪問網路，否則導出jaso會失敗的。

然後我先在網上下載了一個動效的AE文件，將動效中的logo替換為公司APP的logo，然後用AE導出jason文件，結果有兩個問題，第一：導出的jason文件中包含中文；第二：導出的jason文件還附帶了一個image文件。程序員君說：這沒法搞啊。

當然，問題也很快被解決了，第一：需要將AE切換為英文版；第二：因為我是直接把Ai文件導出到AE中的，所以導出jason會生成圖片，解決辦法在lottiefiles官網教程的第6點也講到了，在AE中把AI文件創建為形狀就可以了。

好了，兩個問題都解決了，導出jason給程序員君，OK可以實現。不過，實現的只是我從網上下載的AE動效模板，下一步就是自己做一個了，參考就是這個網易蝸牛讀書的小動效。

於是，我想起來刷微博時看到的一個小教程，就是這個修剪路徑文字特效，看完教程發現，我擦，原來so easy, 重點就是「修剪路徑」這個功能。

然後就是在AE中新建合成—導出ai文件—創建形狀—修剪路徑—更改百分比—打關鍵幀—調調速度，排排順序—導出jason—拖到lottiefiles官網預覽一下，齊活！

發給程序員君，該他表演了。

---

我看有說支持masks的不同組合方式，為什麼我在ae裡面固態層上的4個masks，導出json後效果完全實現不了？

為了測試，就只k了一個透明度，這個也顯示不齣動畫效果。

本來的效果↓

實現出來的效果↓

---

優點:
1. 強大：設計即所見。 設計師AE導出Json文件，Lottie 解析Json文件後調Core Animation的API繪製渲染。複雜的幀動畫如此實現還原度更好，開發成本更低。

2.跨平台: 支持iOS、Android、React Native。

5. 支持動畫屬性多：比起臉書的Keyframes，Lottie支持了更多AE動畫屬性，比如Mask, Trim Paths,Stroke (shape layer)等。

4.靈活高效的API: 控制動畫進度、播放、暫停。

5. 支持動畫屬性多：比起臉書的Keyframes，Lotti支持了更多AE動畫屬性，比如Mask, Trim Paths,Stroke (shape layer)等。

不足：
1. 尚未支持iOS7

2. AE動畫屬性有限，尚未看到支持陰影的效果；代碼里也沒看到使用layer shadow。

3. 只支持AE導出來的特定格式文件。其實設計師用的軟體還蠻多的。

目前只是粗略一窺。還需繼續調研：支持的動畫屬性的邊界情況; 怎樣可以支持iOS7 等；如果引到到自己的app一些無用的功能刪除（比如mac兼容，VC轉場動畫等）。

---

以後再也不用被UE催效果了。

---

推薦閱讀：