svg动画,截取工具有点不忍直视了~~~
为了实现上面的svg动画,可以使用bodymovin插件,简单配置之后,就可以直接可以实现在 AE(可视化操作,不用码代码)上面导出 svg的json数据,在web上播放动画了。简直不能再小白了。
demo:
//html
<div id="svgContainer" class="hide"></div> //data
var svgData = 'XXXXXXXX/svg/1/data.json';
playSvg(svgData) //播放svg
function playSvg(svgData) {
var animItem = bodymovin.loadAnimation({
wrapper: document.getElementById('svgContainer'),
animType: 'svg', //也可以是canvas
loop: true,
autoplay: true,
path: svgData // 传入json数据
}); //销毁实例
$('.XXX').on('click', function() {
animItem.destroy();
});
}