bodymovin 的使用场景初步调研

本文作者：ivweb caorich

bodymovin是什么

专业制作动画采用Adobe公司的after effect软件。做出来的动画可以导出为json文件，bodymovin就是这个动画json文件的前端播放器，支持渲染为svg\canvas\html三种格式。它不仅可以播放动画，可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。可以说是不可多得的好工具。

使用方法

bodymovin官网

首先机子要装AE（adobe after effect），如果没装，就需要找设计师要动画的json文件。

这里假设已经获取到动画导出的json文件了。我扒了codepen的例子到我的站点，大家可以用这个json文件来测试：

动画基本播放

以下所有代码默认都已经导入了bodymovin.min.js

 var animData = {
    wrapper: document.getElementById('bodymovin'),
    animType: 'svg',   //svg/canvas/html
    loop: false,  //是否循环播放
    autoplay: true,
    path: 'http://makto.win/bodymovin/bodymovin/data1.json'

};
var anim = bodymovin.loadAnimation(animData);

控制动画窗口的大小

bodymovin会将对应的svg或者canvas节点插入容器节点中。例如

 <div id="container">
    <canvas width=".." height=".."/>
</div>

canvas的大小将被动态调整为容器宽度或高度按照画布比例的最小值。

虽然bodymovin提供了在已有canvas上渲染的能力，实测试效果并不理想，且没有api文档说明如何进行调整。所以建议控制container的大小来控制动画的大小。

控制帧率

 anim.stop();  //停止
anim.play();   //开始播放
anim.pause()  //暂停
anim.setSpeed(1) //播放速度
anim.goToAndStop(1000, false);  //播放1秒钟后的画面
anim.goToAndStop(2, true);  //播放第2帧
anim.setDirection(-1);   //倒叙播放
anim.playSegments([1,4], false)  //播放第1帧到第4帧
anim.playSegments([[1,4],[30,40],[100,104]], false)  //依次播放1~4帧，30~40帧，100~104帧，之后如果loop:true的话，会循环播放最后一个片段，即循环播放100~104帧
anim.playSegments([1,4], true);  //结束当前片段的播放，立即播放1~4帧。

所以，运用以上的接口，我们可以很好的控制动画对象的播放。

举个例子

一个动画完整的包含一个控件的出现和消失。

我们可以通过以上的api将动画拆分成两个片段： 开始片段和消失片段。步骤是：

• 通过anim.totalFrames获取到动画的总帧数。
• 和设计沟通一下，得知前30帧是出现，后30帧是消失。
• 将前30帧和后30帧拆分成两个不同的片段。在点击事件中分别播放。

事件

• complete 一次播放完成
• loopComplete循环播放一次完成，每次都会触发
• enterFrame播放过程中不断触发，慎用，在无性能瓶颈的情况下，最高触发次数为250fps，所以不要给这个事件加句柄。
• segmentStart不同片段播放开始时候触发，如果是相同片段的循环，第一次后就不会触发此事件了。

坑

• 目前bodymovin的文档支持得不是太好。git上的issue能解决的问题也很有限。api几乎看不到，需要自己慢慢试。
• animType：'html' 支持得不是太好。
• rendererSettings 用于在已有的canvas上渲染动画，work效果不是很好。不推荐使用

性能

选取大小约为300K的动画json文件，在不同平台不同价位的机器上进行测试。(采用QQ X5内核)

同时播放N个动画

所以，这个动画框架在低端android上的可用性还是很低的。如果对UA进行判断，只在ios上采用此动画解决方案，其实也不失很好的办法。

ios

ANDROID

实在是有点卡~

原文链接：http://www.ivweb.io/topic/5900ccce06f26845b620dd7b