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/...