SVG 图像 波浪 动画

Question

我在这里制作动画我有一个 SVG 图像我正在尝试像波浪一样连续移动图像。我试过使用 gsap 和 css 仍然没有得到。任何人都可以建议我任何帮助将不胜感激

GSAP

TweenMax.to("#turbwave", 8, {
  attr:{"baseFrequency":0.01},
  repeat:-1,
  yoyo:true
});

@keyframes wave {
  0% { 
    left: -80px; 
  }
  100% { 
    left: 0; 
  }
}

.container {
   width: 100px;
   overflow: hidden;
}

.container svg {
   position: relative;
   left: -50px;
   width: 200px;
   animation: wave 2s linear infinite;
}

<svg id="wave" xmlns="http://www.w3.org/2000/svg" width="1920" height="780" viewBox="0 0 1920 780">
  <g>
    <g opacity=".75">
      <path fill="#ffefdd" d="M518.416 278.813c100.975 408.098 513.434 328.466 588.907 253.974 75.473-74.493 153.228-259.973 324.949-282.534 154.635-20.315 317.211-182.93 487.728-78.482v453.068c-264.98 2.452-323.019-161.187-601.137 25.146-320.667 214.84-339.51 105.56-508.484 75.563S535.477 828.256 326.51 643.775C188.975 522.356 98.538 508.728 0 535.407V0h260.293c113.729 39.308 218.825 119.99 258.123 278.813z"/>
    </g>
  </g>
</svg>

Answer 1

您目前无法像answer you linked 中的那样为您的 SVG 设置动画的原因是，它们只是通过平移波浪并使每一面匹配来伪造波浪。如果您删除该答案示例中的设置宽度，您可以清楚地看到：

@keyframes wave {
  0% { 
    left: -80px; 
  }
  100% { 
    left: 0; 
  }
}

.container {
  width: 100px;
  overflow: hidden;
}
.container svg {
  position: relative;
  left: -50px;
  width: 200px;
  animation: wave 2s linear infinite;
}

<div class="container">
<svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
    .st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
    <path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
	c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
	c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
	c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
    c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
	c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>
</div>

为了使您的 SVG 像波浪一样制作动画，它会更加复杂，因为两端不匹配。您可能需要使用 SVG 动画工具，例如 GSAP 的 MorphSVG（这是一个付费插件，但您可以在 CodePen 上免费试用）。

对于 MorphSVG，我建议制作 2 或 3 个不同的 SVG，然后使用 MorphSVG 在它们之间制作动画。 GreenSock 网站上有几个示例说明如何执行此操作。

有关 MorphSVG 的更多信息，请参阅 the GreenSock page for it。

Answer 2

对于 Wave SVG，你可以使用这个：

 <svg id="wave" viewbox="0 0 100 15">
        <path fill="#fff" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" />
        <path fill="#fff" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
      </svg>