Lottie动画探索与实践前言 Lottie是什么？ Lottie是一个复杂帧动画的解决方案。它提供一了套从设计师使用A

前言

Lottie是什么？

Lottie是一个复杂帧动画的解决方案。它提供一了套从设计师使用AE（Adobe After Effects）到各端开发者(ios、Android、web)使用动画的工具流，在设计师通过AE制作完动画后，使用AE的扩展程序Bodymovin 导出一份JSON格式的动画数据，然后开发同学可以使用Lottie将导出的JSON数据渲染成动画。

微信截图_20220626222009.png

为什么要用Lottie? 以web端为例，Lottie出现之前，前端开发大多都是使用css来手写实现动画效果，随着动画效果的日益复杂，一些效果会存在一定的兼容问题，而且有些复杂的效果也是难以实现，前端开发需要话费很长时间在动画效果上的编码。Lottie的出现，解放了在动画开发上的生产力，而且也保证了在各端的一致性表现。
Lottie示例

一、如何使用

1. web端使用

lottie-web支持的特性是几个平台中最多的lottie-web特性,可以实现较为复杂的动画、控制动画的播放以及能够监听动画的各个阶段的事件：

1.1 基础使用

一个最简单的使用demo:

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

// 使用
const lottie = lottie.loadAnimation({
  container: element, // 动画的容器
  renderer: 'svg', // 三种渲染方式：1. svg 2. canvas 3. html
  loop: true,
  autoplay: true,
  path: 'data.json' // 动画的json文件，可以是本地的，也可以是远程网络的
});

1.2 控制动画

lottie.play() -- 播放动画

lottie.stop() -- 停止动画

lottie.setSpeed() -- 设置动画的速度

lottie.setDirection() -- 设置动画的方向

lottie.destroy(name) -- 销毁指定名称的动画，如果没有指定名称，则销毁所有的动画实例

lottie.resize() -- 重置所有动画实例

...

代码演示：

const lottie = lottie.loadAnimation({
  container: element, // 动画的容器
  renderer: 'svg', // 三种渲染方式：1. svg 2. canvas 3. html
  loop: true,
  autoplay: true,
  path: 'data.json' // 动画的json文件，可以是本地的，也可以是远程网络的
});

// 播放动画
lottie.play();
// 停止动画
lottie.stop();
// 设置动画的速率；默认为1
lottie.setSpeed(1.5);
// 设置动画的运动方向； 1： 正向 -1： 反向
lottie.setDirection(-1)
// 重置所有动画的实例
lottie.resize()

...

1.3 监听动画的事件

可以使用addEventListener来监听以下的动画事件：

complete -- 动画播放完成
loopComplete -- 当前循环完成时触发
config_ready -- 初始化配置完成
data_ready -- 动画的所有部分加载完成
data_failed -- 部分动画加载失败
loaded_images -- 所有的图片即在完成（成功或失败）
DOMLoaded -- 动画相关dom元素被添加到html中触发
destroy -- 销毁完成时触发

代码演示：

const lottie = lottie.loadAnimation({
  container: element, // 动画的容器
  renderer: 'svg', // 三种渲染方式：1. svg 2. canvas 3. html
  loop: true,
  autoplay: true,
  path: 'data.json' // 动画的json文件，可以是本地的，也可以是远程网络的
});

// 动画结束
lottie.onComplete = () => {
    console.log('动画执行结束')
}

...

二、动画资源

作为开发人员，直接去上手使用AE做lottie动画是比较困难的，还是需要专业的设计人员去做；但是如果设计人员没有时间呢？我们如何去实现lottie动画呢？

其实是有这么一个lottie动画的开源社区的，有很多设计人员贡献的一些免费的动画效果，非常的nice:

假如我们想使用其中的一个动画，具体需要怎么做呢？我们以下边这个动画为例：

1.1 进入动画的详情页

进入之后我们在左上角会发现，动画是支持5种格式进行下载的，这里我们直接下载Lottie JSON格式的就可以，下载完成后直接把json文件添加到项目中即可；

眼尖的同学会发现，在动画的详情页，还有另外一些功能，我们可以在线配置动画的一些参数，并且能实时看到更新后的动画；我们可以配置出自己需要的动画的效果，然后进行下载，扩展性也是非常好的；

那如果我们想对动画的某一部分进行修改，比如想修改下人物的皮肤，也是可以实现的：

在详情页，我们点击上边图中的按钮，会进入到一个在线编辑的页面：

我们可以看到，在页面右边的配置栏中，可以对人物的每个部位进行修改，下图是我对人物皮肤颜色修改后的样子：

修改为我们想要的效果后，可以直接点击下载按钮（上图中圈出部分）导出为Lottie JSON文件，然后应用到项目中去；

通过这个社区，开发者其实可以自主的去完成一些简单的动画，并做适当的配置后，达到需要的效果。当然，如果要实现更加复杂一点的动画，还是需要专业设计师设计的。

三、总结

1. `Lottie`的优势

设计师通过 AE 制作动画，前端可以直接还原，不会出现买家秀卖家秀的情况。
SVG 是可伸缩的，任何分辨率下不会失真。
JSON 文件，可以多端复用（Web、Android、iOS、React Native）。
JSON 文件大小会比 GIF 以及 APNG 等文件小很多，性能也会更好。

2. `Lottie`的不足

Lottie-web 文件本身仍然比较大，未压缩大小为 513k，轻量版压缩后也有 144k，经过 Gzip 后，大小为39k。所以，需要注意 Lottie-web 的加载；
部分AE特效不支持。有少量的 AE 动画效果，Lottie 无法实现；

Lottie动画探索与实践

前言