SVG-Morpheus实现一个图标到另一个图标变形动画效果实例页面

回到相关文章 »

代码：

SVG主体结构示意：
<svg id="icon">
    <g id="xxx-xxx-1">...</g>
    <g id="xxx-xxx-2">...</g>
    <g id="xxx-xxx-3">...</g>
    ...
</svg>
JS代码：
<script src="svg-morpheus.js"></script>
<script>
var eleGs = document.querySelectorAll("g");
var myIcons = new SVGMorpheus('#icon');

var index = 0;
var funMorpheus = function() {
    myIcons.to(eleGs[index].id);
    index++;
    if (!eleGs[index]) {
        index = 0;
        document.body.style.fill = "#" + (Math.random() + "").slice(-6);
    }
    
    setTimeout(funMorpheus, 2000);
};

funMorpheus();
</script>

效果：