SVG 变形动画给出了非常奇怪的结果答案

【问题标题】：SVG Morphing animation giving really weird resultsSVG 变形动画给出了非常奇怪的结果
【发布时间】：2019-06-09 20:13:49
【问题描述】：

anime({
            targets: ".a",
            d: [
                {value: "M0,0,33.32,31.1l89.963,43.315L146.606,0Z"}
            ],
            easing: "easeOutQuad",
            duration: 2000,
            loop: false,
        });

  html, body {
            margin: 0;
            padding: 0;
        }

        svg {
            margin-top: 100px;
        }

        path {
            fill:none;
            stroke:#8103ff;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>



<svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606 92.963">
        <path class="a" d="M0,0V89.963L123.282,74.414,146.606,0Z">
 </svg>
 
<br>
<h5>The SVGs in their raw forms: </h5>
 
 <svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606 92.963">
        <path d="M0,0V89.963L123.282,74.414,146.606,0Z">
 </svg>
 
 <svg xmlns="http://www.w3.org/2000/svg" width="149.606" height="92.963" viewBox="0 0 149.606 92.963">
        <path d="M0,0,33.32,31.1l89.963,43.315L146.606,0Z">
 </svg>

所以我有了想要变形的 SVG，用anime.js。此外，SVG 代码是通过 Adobe XD 导出的。

我无法实现任何类型的 SVG 变形动画。即使是最简单的。最终结果很奇怪。

我尝试在 Stack Overflow 和其他网站上进行搜索，但我并没有真正找到可以解决我的问题的任何东西。我尝试重新绘制形状 10 次，希望在两个 SVG 上绘制相同数量的锚点。但它仍然无法正确绘制动画。

假设我有这 2 个 SVG，经历了真正“微妙”的变化。

问题是，我希望它们能够优雅地从一种状态转到另一种状态，但它们只是变得不合时宜，而且很奇怪。我做错了什么吗？谢谢。

【问题讨论】：

第二条路径似乎以两个移动命令开始。我将它们更改为所有行命令（也将 V 命令转换为 L 命令），它似乎有效：jsfiddle.net/x1b5ac2y Adobe 做了一些奇怪的优化工作。您必须进行一些后期处理。
是的，看，问题是，我也尝试使用 Figma，但不幸的是我看到了相同的结果。我需要自己学习如何调整数据点吗？
尝试使用相同的点数和相同的命令
不久前我不得不创建一个 adobe 生成的 SVG 到画布命令转换器。为了使它工作，我必须使用画布本身不支持的小写字母和形状（如省略号）来处理转换短格式命令（如 V 和 H）的路径，以及相对命令。您可能需要做类似的事情。 Adobe 试图简化导致路径不一致的路径。您必须自己调整数据点，但您可以创建或修改工具来为您完成。
哦，好的，谢谢。我会尝试研究您告诉我的内容，如果我找到对我有用的解决方案，我会发布这个问题的答案。感谢您的帮助。

标签： javascript svg anime.js svg-morphing

【解决方案1】：

在将矢量另存为 svg 时，有时点会减少或翻转。尝试在形状之间变形时很糟糕。试试这个：

https://shapeshifter.design/.

导入您的初始形状，然后单击动画路径。然后在从到部分粘贴第二个形状的路径数据，如果有问题，请根据需要添加点，然后将点拖动到使路径兼容的位置。

然后添加另一个路径动画，将最后一个的结果作为 from 并将第三个变形位置的数据粘贴到 to 区域，然后进行编辑。

满意后，您可以将正在工作的路径数据复制并粘贴到您的项目中。

【讨论】：