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