svg動(dòng)畫(huà)，截取工具有點(diǎn)不忍直視了~~~?

?

為了實(shí)現(xiàn)上面的svg動(dòng)畫(huà)，可以使用bodymovin插件，簡(jiǎn)單配置之后，就可以直接可以實(shí)現(xiàn)在 AE（可視化操作，不用碼代碼）上面導(dǎo)出 svg的json數(shù)據(jù)，在web上播放動(dòng)畫(huà)了。簡(jiǎn)直不能再小白了。

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', //也可以是canvasloop: true,autoplay: true,path: svgData // 傳入json數(shù)據(jù)});//銷(xiāo)毀實(shí)例$('.XXX').on('click', function() { animItem.destroy();}); }

git上的具體使用教程

轉(zhuǎn)載于:https://www.cnblogs.com/leaf930814/p/7110636.html

總結(jié)

以上是生活随笔為你收集整理的借助Bodymovin播放svg动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。