使用 anime.js 进行 SVG 变形

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 之间变形时，我遇到了类似的混乱过渡问题。

我通过确保解决了这个问题：

路径的锚点数量相同。（您可以通过打开文档信息 window 并选择 'Objects' 在 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 变形

SVG morphing with anime.js

css

svg

anime.js