我是SVG动画的新手，我试图为我在Figma中制作并导出为SVG的“波浪”背景制作动画。
基本上，如您在摘要中所见，我试图保持波形的形状，但使轮廓线非常微妙地移动。那有可能吗？如果是这样，我应该使用哪种方法？我不知道从哪里开始。我尝试使用SVG<animate>并弄乱了数字，但是它不起作用，无法解决问题，甚至没有动画。
如果您能为我提供一个示例，或者有人可以指出正确的方向，请尝试一下。
这是我的SVG原始路径：
<svg width="1279" height="650" viewBox="0 0 1279 650" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="
M -138 -167.889
C -138 -167.889
2002 -494.389
1020.73 -167.889
C 39.4558 158.611
1111.22 305.526
942.746 516.955
C 681.205 845.177
-138 458.649
-138 458.649
V -167.889
Z"
fill="#000000">
</path>
</svg>
这是我尝试制作动画并失败的地方：
<div class="wave">
<svg width="1279" height="650" viewBox="0 0 1279 650" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="
M -138 -167.889
C -138 -167.889
2002 -494.389
1020.73 -167.889
C 39.4558 158.611
1111.22 305.526
942.746 516.955
C 681.205 845.177
-138 458.649
-138 458.649
V -167.889
Z"
fill="#EDE5FA">
<animate
repeatCount="indefinite"
fill="#454599"
attributeName="d"
dur="15s"
values="
M -138 -167.889
C -128 -167.889
2002 -494.389
1020.73 -167.889
C 139.4558 158.611
1411.22 305.526
942.746 516.955
C 881.205 845.177
-138 458.649
-138 458.649
V -167.889
Z
">
</animate>
</path>
</svg>
</div>
谢谢
<div class="wave">
<svg width="1279" height="650" viewBox="0 0 1279 650" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="
M -138 -167.889
C -138 -167.889
2002 -494.389
1020.73 -167.889
C 39.4558 158.611
1111.22 305.526
942.746 516.955
C 681.205 845.177
-138 458.649
-138 458.649
V -167.889
Z"
fill="#000000">
</path>
</svg>
</div>我设法修复了代码。我的错误基本上是;在<animate>块中缺少。谢谢，@ enxaneta。然后，我使用了一个不错的技巧来保持整体形状，并仅对其进行少量修改，以便在运行时获得动画效果。这是我的方法。
首先，在Figma中创建一个波形，并将其导出为SVG。例如，我编写的代码给了我以下代码：
<div class="wave">
<svg width="1279" height="650" viewBox="0 0 1279 650" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d=" M-138 -167.889 C-138 -167.889 2002 -494.389 1020.73 -167.889C39.4558 158.611 1111.22 305.526 942.746 516.955C681.205 845.177 -138 458.649 -138 458.649V-167.889Z" fill="#000000"></path>
</svg>
</div>
第二步是返回到Figma并从原始图形生成其他3个形状。我对其他3种形状做了一些非常细微的更改，并将每个形状导出为SVG。这些就是我将在动画中使用的形状。在下面的代码块中，我显示了这三种形状的路径。我只需要那些动画。例：
M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1923.96 -760.278 1020.73 -167.889C117.5 424.5 1248.99 269.909 942.746 516.954C636.5 764 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1989.46 -765.777 1020.73 -167.889C52 430 1302.99 226.348 942.746 516.955C582.5 807.561 -138 458.649 -138 458.649V-167.889Z;
现在，我们需要做的就是将它们放在一起。我们<animate>在SVG中使用标记，并且通过使用attributeName = "d"，我们基本上将目标对准了SVG的原始路径。请注意，在values属性中，我有4种形状，而不是上面生成的3种形状。这是因为我只是重复了3个新形状的第一个形状，以便我们完成动画循环和回送以开始：
<svg width="1279" height="650" viewBox="0 0 1279 650" xmlns="http://www.w3.org/2000/svg">
<path d="M-138 -167.889C-138 -167.889 2002 -494.389 1020.73 -167.889C39.4558 158.611 1111.22 305.526 942.746 516.955C681.205 845.177 -138 458.649 -138 458.649V -167.889Z"
fill="#000000">
<!-- First shape and last shape in values are the same -->
<animate
repeatCount="indefinite"
fill="#454599"
attributeName="d"
dur="12s"
values="
M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1923.96 -760.278 1020.73 -167.889C117.5 424.5 1248.99 269.909 942.746 516.954C636.5 764 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1989.46 -765.777 1020.73 -167.889C52 430 1302.99 226.348 942.746 516.955C582.5 807.561 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
">
</animate>
</path>
</svg>请享用 ：-）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句