Question

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>

所以我有想要通过anime.js进行变形的SVG。而且，SVG代码通过Adobe XD导出。

我在实现任何一种SVG变形动画方面都遇到了麻烦。即使是最简单的。最终结果很奇怪。

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

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

事实是，我希望它们从一种状态优雅地过渡到另一种状态，但是相反，它们只是变形而怪异。我做错了什么吗？谢谢。

Answer 1

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

https://shapeshifter.design/。

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

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

一旦满意，您可以将正在使用的路径数据复制并粘贴到您的项目中。

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

1 个答案: