如何为 SVG 波形图像设置动画？答案

【问题标题】：How to animate an SVG wave image?如何为 SVG 波形图像设置动画？
【发布时间】：2021-03-25 13:59:25
【问题描述】：

我是 SVG 动画的新手，我正在尝试为我在 Figma 中制作并导出为 SVG 的“波浪”背景设置动画。

基本上，正如您在 sn-p 中看到的那样，我试图保持波浪的形状，但使轮廓移动得非常微妙。那有可能吗？如果是这样，我应该使用什么方法？我不知道从哪里开始。我尝试使用 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>

【问题讨论】：

属性values 应该是一个分号 (;) 分隔的值列表。在您的情况下，您需要使用 d 属性列表
您可以阅读https://codepen.io/noahblon/post/an-intro-to-svg-animation-with-smil 了解如何构建 svg 动画。
@enxaneta 哇，分号确实解决了它。非常感谢！
@Pierre-NicolasMougel 感谢您的链接，我会读一读。我有点意识到我可以在 figma 本身中创建不同的路径并生成不同的 SVG 并在我的动画中使用它们
感谢您的提问，我不知道可以为 SVG 制作动画，感谢您，我学到了一些东西 :)

标签： svg svg-animate

【解决方案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>

享受:-)

【讨论】：