如何为SVG容器中的导航栏实现类Discord的点击触发波浪动画？

核心思路 #

Discord的开场动画核心是波浪形态摆动+横向扫入的组合效果，我们可以通过以下步骤实现：

1. 让SVG波浪路径产生形态变化的摆动动画
2. 配合横向位移动画让波浪从屏幕外滑入
3. 用汉堡菜单的点击事件控制动画的触发与关闭

具体实现步骤 #

1. 添加汉堡菜单按钮 #

先在HTML里加入汉堡按钮，放在页面右上角方便用户点击：

<button class="hamburger" id="hamburgerBtn">
  <i class="fas fa-bars"></i>
</button>

2. 基础CSS调整与动画定义 #

我们先把导航SVG默认隐藏在屏幕左侧，再定义波浪摆动和横向扫入两个关键动画，最后通过类来触发组合动画。更新你的CSS代码：

body { font-family: 'Raleway', Arial, Verdana, sans-serif; overflow-x: hidden; }
a { text-decoration: none; color: white; }
.main_hd_cont { position: absolute; top: -1.25vw; left: 1.5vw; z-index: 2; color: white; }
.main_hd_txt { font-size: 3.5vw; font-family: 'ballet_harmonyballet_harmony'; }
svg { filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6)); }
.navigation_svg { 
  position: absolute; 
  top: 0; 
  left: -100vw; /* 默认隐藏在屏幕左侧 */
  z-index: 1; 
  max-width: 100vw; 
  width: 100vw;
}

/* 汉堡按钮样式 */
.hamburger {
  position: fixed;
  top: 2vw;
  right: 2vw;
  z-index: 3;
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 2.5vw;
  padding: 1vw 1.5vw;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.2s ease;
}
.hamburger:hover {
  background: rgba(0,0,0,0.7);
}

/* 波浪摆动动画：通过修改SVG路径实现形态变化 */
@keyframes waveSwing {
  0% { d: path("M57.5,139c52.6,0,272.7-21,509.6,0s515.9,0,556.8,0c19.4,0,37.8,8.3,50.7,22.7c35.5,39.7,120.6,119.2,245.4,136.3c96.7,13.2,176.4,61.6,226.8,100.2c28.6,22,53.6,48.3,74.5,77.7c28.7,40.3,94.9,112.1,194.9,97.7c2.2-0.3,3.8-2.2,3.8-4.4V-1H0v82.5C0,113.3,25.7,139,57.5,139z"); }
  25% { d: path("M57.5,139c52.6,0,272.7-35,509.6,0s515.9,15,556.8,0c19.4,0,37.8,15,50.7,22.7c35.5,25,120.6,100,245.4,136.3c96.7,13.2,176.4,45,226.8,100.2c28.6,30,53.6,48.3,74.5,65c28.7,25,94.9,90,194.9,97.7c2.2-0.3,3.8-2.2,3.8-4.4V-1H0v82.5C0,113.3,25.7,139,57.5,139z"); }
  50% { d: path("M57.5,139c52.6,0,272.7-10,509.6,0s515.9,-10,556.8,0c19.4,0,37.8,5,50.7,22.7c35.5,45,120.6,130,245.4,136.3c96.7,13.2,176.4,70,226.8,100.2c28.6,15,53.6,48.3,74.5,85c28.7,50,94.9,120,194.9,97.7c2.2-0.3,3.8-2.2,3.8-4.4V-1H0v82.5C0,113.3,25.7,139,57.5,139z"); }
  75% { d: path("M57.5,139c52.6,0,272.7-30,509.6,0s515.9,20,556.8,0c19.4,0,37.8,12,50.7,22.7c35.5,30,120.6,110,245.4,136.3c96.7,13.2,176.4,55,226.8,100.2c28.6,25,53.6,48.3,74.5,70c28.7,35,94.9,100,194.9,97.7c2.2-0.3,3.8-2.2,3.8-4.4V-1H0v82.5C0,113.3,25.7,139,57.5,139z"); }
  100% { d: path("M57.5,139c52.6,0,272.7-21,509.6,0s515.9,0,556.8,0c19.4,0,37.8,8.3,50.7,22.7c35.5,39.7,120.6,119.2,245.4,136.3c96.7,13.2,176.4,61.6,226.8,100.2c28.6,22,53.6,48.3,74.5,77.7c28.7,40.3,94.9,112.1,194.9,97.7c2.2-0.3,3.8-2.2,3.8-4.4V-1H0v82.5C0,113.3,25.7,139,57.5,139z"); }
}

/* 横向扫入动画 */
@keyframes slideIn {
  0% { left: -100vw; }
  100% { left: 0; }
}

/* 激活动画的类：组合两个动画 */
.nav-active .navigation_svg {
  animation: slideIn 0.8s ease-out forwards, waveSwing 2s ease-in-out infinite;
}

3. 简单的jQuery触发逻辑 #

因为你对JS不熟悉，我们用最简洁的jQuery代码实现点击触发，直接把这段代码放在HTML的</body>标签前即可：

<script>
$(document).ready(function() {
  $('#hamburgerBtn').click(function() {
    $('body').toggleClass('nav-active');
    // 切换汉堡图标为叉号，提升交互反馈
    $(this).find('i').toggleClass('fa-bars fa-times');
  });
});
</script>

关键细节说明 #

• 波浪摆动动画是通过修改SVG路径的d属性实现的，你可以根据自己的SVG路径调整关键帧里的路径值，让摆动更贴合你的设计
• slideIn动画控制波浪从左到右扫入，waveSwing控制波浪形态的循环摆动，两个动画同时执行
• 点击汉堡按钮时，给body添加/移除nav-active类，从而触发或停止动画
• 汉堡图标会同步切换成叉号，让用户直观知道当前导航的状态

这样你就能实现类似Discord的波浪导航栏触发动画了，不需要复杂的JS知识，复制粘贴代码后，只需要根据自己的需求微调动画时长、摆动幅度即可。

内容的提问来源于stack exchange，提问作者Jordan Dunton