寻求无需WebKit的独特汉堡菜单位图动画实现方案

需求概述 #

• 为首页实现非WebKit标准的汉堡菜单动画，拒绝常规三横杆转X效果
• 采用2-3张低分辨率位图实现动画，避免页面性能损耗
• 已完成菜单状态位图设计：
  • 状态1 → 状态2
  • 状态3 → 状态4

参考示例问题 #

找到的SVG动画示例缺少HTML代码且依赖未标注库，无法直接运行，代码如下：

JavaScript代码 #

var s           = Snap().attr({viewBox:'0 0 100 100'}),
mid         = s.path("M0 40L100 40L100 60L0 60").attr({fill:"#F7F4EA"}),
ext         = s.path('M0 20L100 20M100 80L0 80').attr({strokeWidth: 4,stroke:"#DFBA68"}),
clicked     = 0;

s.click(function(){
if (clicked == 0){
mid.animate({d:"M0 5L55 50L55 50L0 95"},700,mina.bounce);
ext.animate({d:"M40 5L90 51.15M90 48.85L40 95"},700,mina.bounce);
clicked=1;
}  
else {
mid.animate({d:"M0 40L100 40L100 60L0 60"},700,mina.bounce);
ext.animate({d:"M0 20L100 20M100 80L0 80"},700,mina.bounce);
clicked=0;
}
});

CSS代码 #

html{height:100%;}
body{min-height:100%; background-color:#252626;text-align:center;}
svg{margin-top:10%;width:50%;}

可复用位图切换动画代码 #

以下是基于位图的实现方案，无额外依赖，可直接适配你的需求：

基础版：单图切换 #

HTML结构

<button class="burger-menu" aria-label="切换菜单">
  <img src="你的状态1位图路径" alt="菜单图标" class="burger-icon" data-current-state="closed">
</button>

CSS样式

.burger-menu {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px;
}
.burger-icon {
  width: 40px; /* 按需调整尺寸 */
  height: auto;
  transition: opacity 0.3s ease;
}

JavaScript逻辑

const burgerBtn = document.querySelector('.burger-menu');
const burgerIcon = burgerBtn.querySelector('.burger-icon');

// 替换为你的实际位图路径
const stateMap = {
  closed: '状态1位图路径',
  open: '状态2位图路径',
  closed-alt: '状态3位图路径',
  open-alt: '状态4位图路径'
};

// 记录点击次数实现多状态循环
let clickCount = 0;

burgerBtn.addEventListener('click', () => {
  clickCount++;
  switch(clickCount % 4) {
    case 1:
      burgerIcon.src = stateMap.open;
      burgerIcon.dataset.currentState = 'open';
      break;
    case 2:
      burgerIcon.src = stateMap['closed-alt'];
      burgerIcon.dataset.currentState = 'closed-alt';
      break;
    case 3:
      burgerIcon.src = stateMap['open-alt'];
      burgerIcon.dataset.currentState = 'open-alt';
      break;
    case 0:
      burgerIcon.src = stateMap.closed;
      burgerIcon.dataset.currentState = 'closed';
      break;
  }
});

进阶版：平滑过渡切换 #

如果需要更自然的动画效果，可采用多图叠加过渡：

HTML结构

<button class="burger-menu" aria-label="切换菜单">
  <img src="状态1位图路径" alt="菜单" class="burger-layer active">
  <img src="状态2位图路径" alt="菜单" class="burger-layer">
  <img src="状态3位图路径" alt="菜单" class="burger-layer">
  <img src="状态4位图路径" alt="菜单" class="burger-layer">
</button>

CSS样式

.burger-menu {
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  width: 40px; /* 固定容器尺寸 */
  height: 40px;
}
.burger-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.burger-layer.active {
  opacity: 1;
}

JavaScript逻辑

const burgerBtn = document.querySelector('.burger-menu');
const layers = burgerBtn.querySelectorAll('.burger-layer');
let activeIndex = 0;

burgerBtn.addEventListener('click', () => {
  // 隐藏当前层
  layers[activeIndex].classList.remove('active');
  // 切换到下一层
  activeIndex = (activeIndex + 1) % layers.length;
  layers[activeIndex].classList.add('active');
});

内容的提问来源于stack exchange，提问作者Nicholas Bourbaki