背景

使用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調用

html

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

html頁面引入 bodymovin.js

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

詳情語法和選項請參考 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/...

總結

以上是生活随笔為你收集整理的Bodymovin插件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。