bodymovin 的使用场景初步调研

本文作者：ivweb caorich

bodymovin是什么

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

使用方法

bodymovin官网

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

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

动画基本播放

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

代码语言：javascript复制

 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节点插入容器节点中。例如

代码语言：javascript复制

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

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

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

控制帧率

代码语言：javascript复制

 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帧。

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