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

Question

我正在尝试使用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>

Answer 1

使用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>

Answer 2

在我的回答中，我想提供有关实施平滑动画的一般建议，并结合问题作者的具体示例进行思考。

使用属性d实现平滑的动画路径更改的主要条件是：

1. 相同数量的节点
2. 对于路径的初始位置和最终位置中的每个点，分别与节点类型（A; C; Q）完全匹配

可以用不同的方式来满足这些条件，但是最好在矢量编辑器中做到这一点。

下图显示了矢量编辑器中的初始路径，需要将其转换为最终路径，并注意标识条件和相同数量的节点点。
红色箭头显示需要移动的节点。

• 要移动选定的锚点，必须在单击时单击以标记它们 按住 shift
• 然后按住 Ctrl 键，将光标置于所选点上 并将整个曲线移到动画的最终位置。

• 将文件保存在矢量编辑器中，格式为* .svg，然后复制 最终path的公式

动画实现

现在我们有了公式的初始路径和最终路径。要实现属性d路径的动画，请使用命令SMIL

<animate attributeName="d" values="`begin path`;`final path`" .... />   

<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">
	 <animate attributeName="d"
	   values="
	    M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z;
	    M1920,466H0V359s159-60,960-73S1920,0,1920,0Z"
		dur="5s"
		fill="freeze"
        />
	</path>
	</svg>

 

要循环播放动画，请添加values属性begin path：

<animate attributeName="d" values="`begin path`;`final path`;begin path" .... />  

<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">
	 <animate attributeName="d"
	   values="
	    M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z;
	    M1920,466H0V359s159-60,960-73S1920,0,1920,0Z;
		M1920,349H0V242s468-52.44,960-73.33S1920,0,1920,0Z"
		dur="5s"
		fill="freeze"
		repeatCount="indefinite"
        />
	</path>
	</svg>

更新

绕过节点数目和类型完全匹配的限制，允许插件kute-svg.js

插件使用情况example