SVG 变形与anime.js答案

【问题标题】：SVG morphing with anime.jsSVG 变形与anime.js
【发布时间】：2019-03-27 01:49:56
【问题描述】：

我正在尝试制作 SVG 动画，首先我在 Adobe illustrator 中绘制动画，然后获取代码并使用anime.js 对其进行动画处理。

我只为 SVG 中的“d”属性设置动画（更改）。我遇到了与我正在关注的教程中的问题相同的问题：

似乎我的 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>

【问题讨论】：

标签： css svg anime.js

【解决方案1】：

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

我通过确保：

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

这是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 很有帮助。

【讨论】：