如何为 SVG 波浪图像制作动画?
How to animate an SVG wave image?
我是 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。这些是我将在我的动画中使用的形状。在下面的代码块中,我展示了这 3 个形状的路径。我的动画只需要那些。示例:
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;
现在,我们需要做的就是把它们放在一起。我们在 SVG 中使用 <animate>
标签,通过使用 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>
享受:-)
我是 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。这些是我将在我的动画中使用的形状。在下面的代码块中,我展示了这 3 个形状的路径。我的动画只需要那些。示例:
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;
现在,我们需要做的就是把它们放在一起。我们在 SVG 中使用 <animate>
标签,通过使用 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>
享受:-)