本文作者：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=".."/>

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

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

控制帧率

 anim.stop();  //停止
anim.play();   //开始播放
anim.pause()  //暂停
anim.setSpeed(1) //播放速度
anim.goToAndStop(1000, false);  //播放1秒钟后的画面