JS & Lottie web 动画的使用

一、什么是 Lottie ？

Lottie 是一款兼容跨平台 Android/IOS/Web 的动画操作库，只需引入一份 JSON 文件便可播放动画。

JSON 文件是由一款叫做 After Effect 俗称 AE 的设计软件通过 BodyMovin 插件导出的。
作为前端人员来说，我们不用关心如何制造这份 JSON 动画文件，是由设计师来提供的。

二、Lottie 的好处？

在讲 Lottie 前，先来回顾以前在操作动画时，有几种方式：

1. 采用 css transformation 或 JS DOM 操作。
2. 采用 gif 。
3. 采用多张 png ，在结合 JS 不断切换。

以上几种方式都有各自的缺陷，比如 css/js 会触发回流/重绘，gif 和 png 占用文件体积较大，
重要的是，我们若想达到动画暂停或动画指定区间的播放时，往往带来繁琐的代码量和性能损耗。
甚至对于兼容跨平台来说，也很难做到一段代码多端通用。

Lottie 就是用来解决这个问题的，它的好处有：

1. 文件体积较少。
2. 可控性强。
3. 不失真。
4. 一个动画跨平台通用。
5. 懒加载，提高性能。

三、Lottie 的使用

Lottie 的使用非常简单，完全就是傻瓜式调用。

1. 安装

npm install lottie-web

2. 使用

var svgContainer = document.getElementById('svgContainer');
var animItem = bodymovin.loadAnimation({
  wrapper: svgContainer, // 动画要挂载的 DOM 容器。
  animType: 'svg', // 播放格式类型。
  autoplay: false, // 是否自动播放。
  loop: true, // 是否轮询播放。
  path: 'https://labs.nearpod.com/bodymovin/demo/ik/data.json' // 动画数据。
});

// 动画加载完成的回调函数。
animItem.addEventListener('DOMLoaded', function(){});

const click = document.getElementById('click')
click.onclick = () => {
  // animItem.goToAndPlay(20, true); // 跳转到某个位置，开始播放。
  // animItem.goToAndStop(10, true); // 跳转到某个位置，并暂停。
  
  // animItem.playSegments([10,20], true) // 范围播放。
  // animItem.play(); // 完整播放。
  // animItem.stop(); // 停止播放。
  // animItem.destroy(); // 销毁实例。
  
  // animItem.setSpeed(4); // 设定播放速度。
  // animItem.setDirection(-1); // 设定播放方向。
  // animItem.getDuration(); // 获取该动画总帧数或秒数。
}

            

参考文献：
https://github.com/airbnb/lottie-web

---

完！