📃 使用Lottie创建动画

Lottie简介
使用AE导出动画
在Web中使用
其他平台相关库
参考资料

Lottie简介

Lottie是一个用于Android，iOS，Web和Windows的库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上呈现它们！

官方文档：

GitHub：

CDN：

CodePen示例：

目前，阿里巴巴图标库已经支持Lottie了。

使用AE导出动画

安装插件

安装AE（Adobe After Effect）
安装ZXP，下载地址：https://aescripts.com/learn/zxp-installer/
安装bodymovin，下载地址：https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp

配置AE

安装好后，在AE中进行设置：
在“编辑 -> 首选项 -> 常规 -> 脚本与表达式”中开启“允许脚本写入文件和访问网络”

导出json动画文件

在“窗口 -> 扩展 -> Bodymovin”可以导出动画

勾选需要导出的动画，设置导出路径，

在设置中可以设置导出参数：

点击“渲染动画”开始导出

导出后，可以看到导出的文件 data.json，由于我勾选了“转成Base64”选项，只导出了一个json文件。如果未勾选此选项，会生成一个images文件夹，用于存放动画中的图片资源。

实际上，导出的json文件是用来描述动画位置、节点、运动信息的一个文件，可以用Lottie进行加载。

在Web中使用

引入

通过CDN引入：

lottie:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.1/lottie.min.js"></script>
lottie-player:
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

通过NPM引入：

npm install lottie-web

创建动画

创建动画的方式有两种。

第一种：使用lottie.min.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lottie.min.js"></script>
</head>
<body>
  <div id="container" style="width: 300px; height: 300px;"></div>
  <script>
    let container = document.querySelector("#container")
    lottie.loadAnimation({
      container: container, // the dom element that will contain the animation
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: './data.json' // the path to the animation json
    });
  </script>
</body>
</html>

lottie.loadAnimation接收以下参数：

名称	描述
container	用于渲染的容器，一般使用一个 div 即可
renderer	渲染器，可以选择 ‘svg’ / ‘canvas’ / ‘html’，个人测试发现 svg 效果和兼容性最好
name	动画名称，用于 reference
loop	循环
autoplay	自动播放
path	json 路径，页面会通过一个 http 请求获取 json
animationData	json 动画数据，与 path 互斥，建议使用 path，因为 animationData 会将数据打包进来，会使得 js bundle 过大

第二种：使用lottie-player.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lottie-player.js"></script>
</head>
<body>
  <lottie-player src="./data.json" background="transparent" speed="1" style="width: 600px; height: 600px;" loop controls autoplay></lottie-player>
</body>
</html>

Lottie拥有加载网络资源的能力，可以直接加载一个来源于网络的json动画：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body>
  <lottie-player src="https://assets8.lottiefiles.com/private_files/lf30_wpyddzzi.json" background="transparent" speed="1" style="width: 600px; height: 600px;" loop controls autoplay></lottie-player>
</body>
</html>

常用方法

使用lottie.loadAnimation创建的动画返回一个实例，可以调用以下方法：

名称	参数	描述
stop	无	停止动画
play	无	播放动画
pause	无	暂停
setSpeed	Number	设置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度
setDirection	Number	正反向播放，1 表示正向，-1 表示反向
goToAndStop	Number, [Boolean]	跳到某一帧或某一秒停止，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false
goToAndPlay	Number, [Boolean]	跳到某一帧或某一秒开始，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false
playSegments	Array, [Boolean]	播放片段，参数1为数组，两个元素为开始帧和结束帧；参数2为，是否立即播放片段，还是等之前的动画播放完成
destroy	无	销毁

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lottie.min.js"></script>
</head>
<body>
  <div id="container" style="width: 300px; height: 300px;"></div>
  <button onclick="play()">播放</button>
  <button onclick="stop()">停止</button>
  <button onclick="pause()">暂停</button>
  <script>
    let container = document.querySelector("#container")
    let anim = lottie.loadAnimation({
      container: container,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: './data1.json'
    });
    function play() {
      anim.play()
    }
    function stop() {
      anim.stop()
    }
    function pause() {
      anim.pause()
    }
  </script>
</body>
</html>

事件监听

可以设置以下事件监听函数：

onComplete 创建时将loop设置为false的时候，播放完后出发
onLoopComplete 单次循环结束触发
onEnterFrame 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
onSegmentStart 播放指定片段开始时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。

可以通过 addEventListener绑定以下事件：

complete同onComplete
loopComplete同onLoopComplete
enterFrame同onEnterFrame
segmentStart同onSegmentStart
config_ready (when initial config is done)
data_ready 动画json文件加载完毕触发
DOMLoaded 动画相关的dom已经被添加到html后触发
destroy将在动画删除时触发

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/lottie.min.js"></script>
</head>
<body>
  <div id="container" style="width: 300px; height: 300px;"></div>
  <button onclick="play()">播放</button>
  <button onclick="stop()">停止</button>
  <button onclick="pause()">暂停</button>
  <div id="loop"></div>
  <script>
    let container = document.querySelector("#container")
    let anim = lottie.loadAnimation({
      container: container,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: './data/data.json'
    })
    anim.onLoopComplete = function(e) {
      console.log(e)
      document.getElementById("loop").textContent = `播放了${e.currentLoop}次`
      if (e.currentLoop > 3) {
        anim.stop()
      }
    }
    function play() {
      anim.play()
    }
    function stop() {
      anim.stop()
    }
    function pause() {
      anim.pause()
    }
  </script>
</body>
</html>

Lottie事件支持事件对象，第28行的事件对象结构如下：

{
  currentLoop: 1, // 当前循环次数
  direction: 1, // 方向
  totalLoops: 73, // 总时长，只在"enterFrame"中有效，
  type: "loopComplete" // 事件类型
}

当播放停止后，如果再次开始播放，则currentLoop从1重新计数。

其他平台相关库

Vue：https://github.com/chenqingspring/vue-lottie
React：https://github.com/felippenardi/lottie-react-web
微信小程序：https://github.com/wechat-miniprogram/lottie-miniprogram