SVG变形与anime.js

Question

我正在尝试创建一个SVG动画，首先我在Adobe illustrator中绘制动画，然后我获取代码并使用anime.js为其设置动画。

我正在动画（更改）SVG中的“d”属性。我遇到的问题和我正在遵循的教程中的问题一样：

youtube tutorial (19:20)

似乎我的SVG代码没有正确导出，或者我的锚点做错了。

StartUpTimeline.add({
		targets: morph,
		d: [
			{ value: 'M0,0,1,360S184,253,440,254c245,1,346,236,520,236,182,0,277-189,559-189,183,0,402,100,402,100V1Z' },
		],
		easing: 'easeInQuint',
		duration: 1500,
	})

<svg id="morph" height="100%" width="100%" viewbox="0 0 1920 1080" preserveAspectRatio="none">	
      <path class="morph" fill="#002e3a" 
			d="M0,0H1S184-1,440,0C685,1,786,0,960,0c182,0,246,1,528,1h433Z"/>
</svg>

Answer 1

在Adobe Illustrator中创建的SVG之间进行变形时，我遇到了类似的杂乱过渡问题。

我通过确保：

1. 路径具有相同数量的锚点。 （您可以通过打开“文档信息”窗口并选择“对象”在AI中进行检查。）
2. 从同一个角开始，路径以相同的方向绘制。否则，在变形期间你会得到一个点的交叉，因为第一个形状的第一个节点移动到第二个形状的第一个节点的位置。

这是一个demo。

let shapes = [
    {
        d: "M1037.5,253.5c-159.2-139.1-508-173-508-173l-444,899l737-253l262,328C1084.5,1054.5,1187.2,384.3,1037.5,253.5z"
    },
    {
        d: "M926.5,301.5c-159.2-139.1-793-135-793-135l38,925l244-330l606,354C1021.5,1115.5,1076.2,432.3,926.5,301.5z"
    }
]


var morph = anime({
    targets: '.morph-path',
    d: [
        {value: shapes[0].d},
        {value: shapes[1].d}
    ],
    duration: 5000,
    direction: 'alternate',
    autoplay: true,
    easing: 'linear',
    elasticity: 100,
    loop: true
});

我发现this tutorial很有帮助。