初探 lottie

初探 lottie

秋有话说

做为一名 H5 前端程序员，在一些包含动画的项目中，设计师老是要来问一下你"这个动画是要导出序列帧仍是 GIF"，"导出 GIF 可能会有白边"，"不能再压缩，再压就糊了“…...

使用序列帧的方式作动画

在以前的一些项目中，动画通常都是让设计师导出序列帧，而后在前端经过 css 来实现动画，可是你知道的，序列帧文件比较大，并且我是本身把这些序列帧在 ps 上作成 sprite 的，无疑又增长了本身的工做量，若是使用 TexturePacker 自动生成 sprite，可是序列帧是没有按顺序排放的，TexturePacker 为了充分利用图片空间，有些帧还会旋转,这样就没法使用 css 的 steps 直接作序列帧动画。再者，对于一些有用户的交互的序列帧，操做起来更加麻烦，序列帧在某些机型上还会出现跳帧的状况。

使用 GIF 作动画

使用 GIF 作动画，有着相同的一些问题，文件大，不可控，GIF 会一致循环播放，没法作到单次播放，更不用说用户交互了，有些 GIF 还会有白边，显示效果差。

使用 svg 作动画

在前端本身用 svg 作动画的方式只试过一次，设计师先在 AE 上导出 svg 的路径坐标，svg 的坐标是根据设计画的顺序生成的，这就致使在一些路径动画中，维持成本至关大，并且前端直接使用 svg 作的一些动画自己实现的成本也比较高。

总的来讲，以上的三种方法，都有这着各自的或多或少的一些缺点。

初探 lottie

最近在 GitHub 上发现了 airbnb 一个开源项目 lottie-web，试了一下，这个库能够很方便地对动画进行操做，直接在 AE 上导出 json 文件操做。可是仍是发现了一个问题，对于一些把一些图片导入 AE 作成的动画，在 AE 上导出 json 文件时同时还有导出一个 images 文件夹，里面存放了一些动画中的图片，这个文件夹的大小也是有点大的。然而，这个库仍是值得去试一下的。下面对 lottie 的使用方法作一些记录。

AE 安装 bodymovin 插件

1. 下载安装 ZXP installer
2. 下载 bodymovin 插件
3. 把下载好的 bodymovin.zxp 拖到 ZXP installer 中
4. 在 AE 的首选项->常规中勾选容许脚本写入文件和访问网络
5. 在 AE 中打开菜单窗口->扩展->Bodymovin，选择要输出的动画和存放路径，点击render渲染输出。
6. 渲染完毕就会看到输出的 json 文件和 images 文件夹。

获取 bodymovin 库

你能够在 html 页面上直接调用静态地址https://cdnjs.com/libraries/bodymovin，你也能够下载 bodymovin 的 js 源文件，在 AE 打开 bodymovin 插件时有个Get Player按钮，能够点击跳转下载源文件。

<script src="js/bodymovin.js" type="text/javascript"></script>
<!-- 或者 -->
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>

Bodymovin 在 npm 和 bower 上也可使用。

# NPM
npm install lottie-web

# Bower
bower install lottie-web

另外，文件lottie.light.js只支持播放以 svg 格式导出的动画。

使用

调用 lottie.loadAnimation()方法启动动画。

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})

• container：动画容器，dom 元素
• path：从 AE 中导出的 json 文件
• renderer：动画格式
• loop：是否循环播放动画
• autoplay： 是否自动播放动画
• name：动画名称

动画实例的主要方法

anim.play() — 播放动画。

anim.stop() — 中止动画。

anim.pause() — 暂停动画。

anim.setSpeed(speed) — 设置播放速度，参数 speed 为 Number ，1为正常速度。

$('.speed-slow').click(function () {
    anim.setSpeed(0.5);
});

$('.speed-normal').click(function () {
    anim.setSpeed(1);
});

$('.speed-fast').click(function () {
    anim.setSpeed(2);
});

anim.goToAndStop(value, isFrame) — 跳到某一帧并暂停播放。第一个参数是 Number 。第二个参数是 Boolean，设置true则代表第一个参数表明的是帧数，false表明第一个参数为时间值（单位毫秒），默认 false。

$('.gostop').click(function () {
    anim.goToAndStop(3000, false);
});

anim.goToAndPlay(value, isFrame) — 跳到某一帧并播放。同上。

$('.goplay').click(function () {
    anim.goToAndPlay(1000, true);
});

anim.setDirection(direction) — 设置播放方向。1 为正着播，-1反着播。

$('.dirc').click(function () {
    anim.setDirection(-1);
});

anim.playSegments(segments, forceFlag) — 播放某一片断。第一个参数为一维数组或多维数组，每一个数组包含两个值（开始帧，结束帧），第二个参数是一个 Boolean ，决定是否当即强制播放该片断。

$('.seg1').click(function () {
    anim.playSegments([10, 20], false);
});

$('.seg2').click(function () {
    anim.playSegments([[0, 10], [70, 80]], true);
});

anima.destroy() — 注销动画。

lottie 的主要方法

lottie.play(<name>) — 播放全部动画，name为动画名称，播放该动画。

lottie.stop(<name>) — 中止因此动画，name为动画名称，中止该动画。

lottie.setSpeed(speed, <name>) — 设置动画播放速度，speed指定速度，1为正常值，name为动画名称，只设定该动画的速度。

$('.lottie-slow').click(function () {
    lottie.setSpeed(0.5);
});

$('.lottie-normal').click(function () {
    lottie.setSpeed(1);
});

$('.lottie-fast').click(function () {
    lottie.setSpeed(2);
});

lottie.setDirection(direction, <name>) — 设置动画播放方向，direction指定方向，1为正向，-1为反向，name为动画名称，只设定该动画。

lottie.loadAnimation(obj) — 加载动画

lottie.destroy() — 注销动画释放资源，同时清空 dom 节点。

lottie.registerAnimation() — 能够给一个节点直接注册一个动画，该节点必须包含有指向 json 文件的data-animation-path属性。

lottie.setQuality() — 设置播放质量，默认 high，能够设置为 high、medium、low 或者一个大于 1 的数值。在有些动画中，数值低于 2 时不会有区别。

事件监听

complete — 动画播放结束时触发（循环播放不会触发）

anim.addEventListener('complete', function () {
    console.log('complete');
});

loopComplete — 进入下一个循环时触发

anim.addEventListener('loopComplete', function () {
    console.log('loop complete');
});

enterFrame — 每进入一帧触发一次

anim.addEventListener('enterFrame', function () {
    console.log('enter frame');
});

segmentStart — 进入片断播放时触发

anim.addEventListener('segmentStart', function () {
    console.log('segment start');
});

config_ready — 初始化配置完成时触发

anim.addEventListener('config_ready', function () {
    console.log('config ready');
});

data_ready — 动画全部部分加载完成时触发

anim.addEventListener('data_ready', function () {
    console.log('data ready');
});

DOMLoaded — dom 元素加载完成时触发

anim.addEventListener('DOMLoaded', function () {
    console.log('dom loaded');
});

destroy — 注销动画时触发

anim.addEventListener('destroy', function () {
    console.log('destroy');
});

code