一、簡介
Lottie 是一個應用十分廣泛動畫庫，適用于Android、iOS、Web、ReactNative、Windows的庫，它解析了用Bodymovin導出為json的Adobe After Effects動畫，并在移動和網絡上進行了原生渲染。其和 GSAP 這類專注動畫曲線、插值等js動畫庫不同，它本質上是一套跨平臺的平面動畫解決方案。其提供了一套完整得從AE到各個終端的工具流，通過AE的插件將設計師做的動畫導出成一套定義好的json文件，之后再通過渲染器進行渲染，它提供了“SVG”、“Canvas”和“HTML”三種渲染模式，最常用的是第一種和第二種。
二、優缺點
2.1 優點
Lottie方法方案是由設計師出動畫，導出為json，給前端播放。所以，使用Lottie方案的好處在于：
①?動畫由設計使用專業的動畫制作工具Adobe After Effects來實現，使動畫實現更加方便，動畫效果也更好；
②?前端可以方便的調用動畫，并對動畫進行控制，減少前端動畫工作量；
③?設計制作動畫，前端展現動畫，專業人做專業事，分工合理；
④?還原程度高，百分之百；
⑤?使用lottie方案，json文件大小會比gif文件小很多，性能也會更好。
總結：能直接將AE中設計的動畫效果導出為json，并直接在頁面上顯示，是一種開發成本又小，效果又很還原的方案。
2.2 不足
①?lottie-web文件本身仍然比較大（大小為262k，經過gzip后，大小為65.8k）。所以，需要注意lottie-web的加載。目前H5項目有離線包，PC項目也會上PWA，會對其進行緩存，保證加載速度。
②?lottie動畫其實可以理解為svg動畫/canvas動畫，不能給已存在的html添加動畫效果；
③?動畫json文件的導出，目前是將AE里面的參數一一導出成json內容，如果設計師建了很多的圖層，可能仍然有json文件比較大（20kb+）的問題。需要設計師遵循一定的規范。
④?有很少量的AE動畫效果，lottie無法實現，有些是因為性能問題，有些是沒有做。比如：描邊動畫等。
三、使用
3.1 基本步驟
-
安裝 lottie-web
npm install lottie-web --save -
引入這個庫
import lottie from 'lottie-web' 拿到 UI 給的配置文件（JSON 數據）
-
初始化動畫
const animation = lottie.loadAnimation({ container: document.getElementById('box'), renderer: 'svg',// 渲染方式：svg、canvas loop: true, // 循環播放，默認：false autoplay: true, //自動播放 ，默認：true path: ' ' // json 路徑 })
3.2 常用方法
animation.play(); // 播放，從當前幀開始播放
animation.stop(); // 停止，并回到第0幀
animation.pause(); // 暫停，并保持當前幀
animation.goToAndStop(value, isFrame); // 跳到某個時刻/幀并停止isFrame(默認false)指示value表示幀還是時間(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某個時刻/幀并進行播放
animation.goToAndStop(30, true); // 跳轉到第30幀并停止
animation.goToAndPlay(300); // 跳轉到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含兩個數字或者兩個數字組成的數組，forceFlag表示是否立即強制播放該片段
animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20幀
animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5幀和10-18幀
animation.setSpeed(speed); // 設置播放速度，speed為1表示正常速度
animation.setDirection(direction); // 設置播放方向，1表示正向播放，-1表示反向播放
animation.destroy(); // 刪除該動畫，移除相應的元素標簽等。在unmount的時候，需要調用該方法
3.3 常用事件
監聽方式一：
- onComplete：動畫整體播放完成（如果是循環播放，循環播放完成后觸發）
- onLoopComplete：針對循環動畫，單次一遍播放完成后觸發
- onEnterFrame
- onSegmentStart
監聽方式二：addEventListener with the following events:
- complete
- loopComplete
- enterFrame
- segmentStart
- config_ready (when initial config is done)
- data_ready (when all parts of the animation have been loaded)
- DOMLoaded (when elements have been added to the DOM)
- destroy
四、JSON 字段介紹
