背景
使用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/...