SVG 变形不平滑变形 - 动漫 js答案

【问题标题】：SVG morph not morphing smoothly - anime jsSVG 变形不平滑变形 - 动漫 js
【发布时间】：2019-07-31 10:01:20
【问题描述】：

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

【问题讨论】：

标签： javascript svg anime.js svg-morphing

【解决方案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>

【讨论】：

谢谢，但你有什么改变？
路径的d属性

【解决方案2】：

在我的回答中，我想就平滑动画的实现给出一般性建议，并通过问题作者的具体示例来考虑它们。

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

节点数相同
节点类型（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>

要循环动画，添加值属性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

【讨论】：