背景

运用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/…