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