如何为 SVG 波浪图像制作动画？

Question

我是 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>

Answer 1

我设法修复了代码。我的错误基本上是缺少 <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 波浪图像制作动画？

How to animate an SVG wave image?

svg

svg-animate