0 

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 代码是通过 Adob​​e XD 导出的。

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

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

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

问题是，我希望他们能够优雅地从一个状态转到另一个状态，但相反，它们只是变形而奇怪。我做错了什么吗？谢谢。

4

1 回答 1

0

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

https://shapeshifter.design/。

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

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

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

于 2020-05-21T05:06:13.623 回答