Bodymovin插件的使用

背景

使用css3来实现比较复杂动画的时候往往力不从心。所以网上看到的大多数专题基本上都是使用svg或者canvas来做的， 但是要对这些的api有一定的了解才能做出来，而且还要各种代码，过程相当繁杂。最近在github上面看到的一个神奇的插件：bodymovin，可以实现在 After Effect（可视化操作，不用码代码）上面导出 svg的json数据，然后在html上引入bodymovin.js，简单的初始化就可以在网页上面实现svg动画。amazing!

安装

• github上面的使用教程 https://github.com/bodymovin/...

• 具体的插件安装也可参考文章
  http://www.mq2014.com/after-e...

html调用

1. html

   <div id='container'></div>

2. html页面引入 bodymovin.js

   <script src="js/bodymovin.js" type="text/javascript"></script>

3. 详情语法和选项请参考 github， wrapper为要出现动画的DOM，path为汇出的json档位置。

   var svgContainer = document.getElementById(‘container’);
   var animItem = bodymovin.loadAnimation({
   wrapper: svgContainer,//svg容器
   animType: ‘svg’,
   loop: true,
   path: ‘data.json’ //该json就是 After Effect的 bodymovin插件导出的json文件
   });

参考文章
http://www.mq2014.com/after-e...
http://www.jianshu.com/p/d887...
https://github.com/bodymovin/...