Lottie是什麼？
Lottie 是Airbnb開源的一個面向 iOS、Android、React Native 的動畫庫，能分析 Adobe After Effects 導出的動畫，並且能讓原生 App 像使用靜態素材一樣使用這些動畫，完美實現動畫效果。
Lottie項目地址：https://github.com/airbnb/lottie-android
官方效果圖：
所有這些動畫都是在After Effects中創建的，使用Bodymovin導出，並且無需額外的工程師工作即可完成原生渲染。
Bodymovin是一個又Hernan Torrisi創建的After Effects插件，導出文件格式爲json和包括一個javascript網絡播放器。而它最大的優點是提供了一套完整的跨平臺動畫實現工作流;
Lottie實現原理
設計師把一張複雜的圖片使用多個圖層來表示，每個圖層展示一部分內容，圖層中的內容也可以拆分爲多個元素。拆分元素之後，根據動畫需求，可以單獨對圖層或者圖層中的元素做平移、旋轉、收縮等動畫。
Lottie的使用的資源是需要先通過bodymovin( bodymovin 插件本身是用於網頁上呈現各種AE效果的一個開源庫)將 Adobe After Effects (AE)生成的aep動畫工程文件轉換爲通用的json格式描述文件。Lottie則負責解析動畫的數據，計算每個動畫在某個時間點的狀態，準確地繪製到屏幕上。
性能
1.官方說明
如果沒有mask和mattes，那麼性能和內存非常好，沒有bitmap創建，大部分操作都是簡單的cavas繪製。
如果存在mattes，將會創建2～3個bitmap。bitmap在動畫加載到window時被創建，被window刪除時回收。所以不宜在RecyclerView中使用包涵mattes或者mask的動畫，否則會引起bitmap抖動。除了內存抖動，mattes和mask中必要的bitmap.eraseColor()和canvas.drawBitmap()也會降低動畫性能。對於簡單的動畫，在實際使用時性能不太明顯。
如果在列表中使用動畫，推薦使用緩存LottieAnimationView.setAnimation(String, CacheStrategy) 。
2.屬性動畫和Lottie動畫對比
以下性能對比是以K歌內單個禮物動畫效果
|
|
屬性動畫 |
lottie使用硬件加速 |
lottie未使用硬件加速 |
|---|---|---|---|
|
幀率 |
|
|
|
|
內容 |
|
|
|
|
CPU |
|
|
|
Lottie動畫在未開啓硬件加速的情況下，幀率、內存，CPU都比屬性動畫差，開啓硬件加速後，性能差不多。
3、未開啓硬件加速，Lottie動畫大小幀率對比
|
0.12倍 |
1倍 |
|---|---|
|
|
|
主要耗時在draw方法，繪製區域越小，耗時越小
lottie優點
Lottie方法方案是由設計師出動畫，導出爲json，給前端播放。所以，使用Lottie方案的好處在於：
- 動畫由設計使用專業的動畫製作工具Adobe After Effects來實現，使動畫實現更加方便，動畫效果也更好；
- 前端可以方便的調用動畫，並對動畫進行控制，減少前端動畫工作量；
- 設計製作動畫，前端展現動畫，專業人做專業事，分工合理；
- 賣家秀即買家秀，還原程度百分之百；
- 使用lottie方案，json文件大小會比gif文件小很多，性能也會更好。
lottie不足
使用Lottie方案有以下不足之處：
- lottie-web文件本身仍然比較大，lottie.js大小爲513k，輕量版壓縮後也有144k，經過gzip後，大小爲39k。所以，需要注意lottie-web的加載。目前H5項目有離線包，PC項目也會上PWA，會對其進行緩存，保證加載速度。
- lottie動畫其實可以理解爲svg動畫/canvas動畫，不能給已存在的html添加動畫效果；
- 動畫json文件的導出，目前是將AE裏面的參數一一導出成json內容，如果設計師建了很多的圖層，可能仍然有json文件比較大（20kb）的問題。需要設計師遵循一定的規範。
- 有很少量的AE動畫效果，lottie無法實現，有些是因爲性能問題，有些是沒有做。比如：描邊動畫等
|
文件 |
大小 | gzip後 |
|---|---|---|
| lottie.js | 513k | 92k |
| lottie.min.js | 237k | 60k |
| lottie_light.js (lottie_web輕量版，僅支持svg渲染) | 345k | 60k |
| lottie_lignt.min.js | 144k | 39k |