借助Bodymovin播放svg动画

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上的具体使用教程

转载于:https://www.cnblogs.com/leaf930814/p/7110636.html