借助Bodymovin播放svg动画

时间:2023-02-07 15:26:22

svg动画,截取工具有点不忍直视了~~~

借助Bodymovin播放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();
});
}

git上的具体使用教程