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