• 官方手册：http://airbnb.io/lottie/#/web
• 源码：https://github.com/airbnb/lottie-web
• Lottie 源码与原理解析：https://zhuanlan.zhihu.com/p/38140917

一、简介

Lottie 是一个应用十分广泛动画库，适用于Android、iOS、Web、ReactNative、Windows的库，它解析了用Bodymovin导出为json的Adobe After Effects动画，并在移动和网络上进行了原生渲染。其和 GSAP 这类专注动画曲线、插值等js动画库不同，它本质上是一套跨平台的平面动画解决方案。其提供了一套完整得从AE到各个终端的工具流，通过AE的插件将设计师做的动画导出成一套定义好的json文件，之后再通过渲染器进行渲染，它提供了“SVG”、“Canvas”和“HTML”三种渲染模式，最常用的是第一种和第二种。

image.png

二、优缺点

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 字段介绍

image.png