javascript - SVG变形无法平滑变形-日本动漫JS

我正在尝试使用Anime JS创建一个简单的SVG变形，但是SVG不能平稳过渡，因为您可以在下面看到它的跳跃。有人知道为什么会这样吗？

const SVG_PATHS = [
	{ value: "M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z" },
   { value: "M1920,466H0V359s159-60,960-73S1920,0,1920,0Z" }
];

const MORPH_SVG = anime({
   targets: ".path",
   d: [
      SVG_PATHS[1],
      SVG_PATHS[0]
      ],
   easing: "linear",
   duration: 5000,
   loop: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 349" class="svg_curve">
	<path style="fill: #000;" d="M1920, 349H0V242s468-52.44, 1160-73.33S1920, 0, 1920, 0Z" class="path"/>
</svg>

最佳答案

使用SVG_PATHS [0]作为路径的值

const SVG_PATHS = [
	{ value: "M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z" },
   { value: "M1920,466H0V359s159-60,960-73S1920,0,1920,0Z" }
];

const MORPH_SVG = anime({
   targets: ".path",
   d: [
      SVG_PATHS[1],
      SVG_PATHS[0]
      ],
   easing: "linear",
   duration: 5000,
   loop: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 349" class="svg_curve">
	<path style="fill: #000;" d="M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z" class="path"/>
</svg>

关于javascript - SVG变形无法平滑变形-日本动漫JS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57288149/