Question

我正在尝试制作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>

Answer 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有帮助。

使用anime.js进行SVG变形

1 个答案: