动画类库(5)lottie-weblottie-web一个适用于Web，Android，iOS，React Native

简介：

lottie-web一个适用于Web，Android，iOS，React Native和Windows 的移动库，它可以使用Bodymovin解析以json 格式导出的Adobe After Effects动画，并在移动设备上进行本地渲染.

使用：

通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出，Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。 ① bodymovin插件下载安装 ② 安装并解压bodymovin ③ 打开AE，添加bodymovin扩展 ④ 导出data.json文件，动画的数据文件详细可参考：炫酷神器，AE插件Bodymovin.zxp的安装与使用 ⑤ API

导入初始化：

<script src="js/bodymovin.js" type="text/javascript"></script>

let animation = bodymovin.loadAnimation({
  animationData, // [必须] data.json文件
  path, // data.json文件路径(animationData/path选其一传入即可)
  container，// [必须] 父容器
  renderer, // [必须] 渲染方式
  loop,
  autoplay
}

暂停/停止/播放：

bodymovin.play()
bodymovin.pause()
bodymovin.stop() // 回到第0帧

跳转之某帧并播放：

animation.gotoAndStop(time)或animation.gotoAndStop(frame)
animation.gotoAndPlay(time)或animation.gotoAndPlay(frame)

设置fp：

animation.setSubframe()
// true: 使用本地环境的fps [默认]
// false: 使用ae原本的fps

事件监听：

animation.onComplete = function () {} // 动画结束
animation.onLoopComplete = function () {} // 当前循环结束
// 使用addEventListener方式
animation.addEventListener('complete', function () {})
animation.addEventListener('loopComplete', function () {})

lottie优点：

Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：

① 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；

② 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；

③ 设计制作动画，前端展现动画，专业人做专业事，分工合理；

④ 卖家秀即买家秀，还原程度百分之百；

⑤ 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。

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无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等。

动画类库(5)lottie-web

官方文档：airbnb.io/lottie/#/

源码地址：github.com/airbnb/lott…

简介：

使用：

导入初始化：

lottie优点：

lottie不足：