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