如何为每个动画添加对应按钮？现有切换代码该如何修改？

当然可以使用array.push()来实现为每个动画分配专属按钮的需求，我们可以通过动态生成按钮元素并将其存入数组的方式，统一管理这些按钮及其对应的动画逻辑。以下是修改后的代码：

修改后的JavaScript代码 #

const animationButtonsComponent = () => ({
  init() {
    const animationList = ['idle', 'pockets', 'hiphop', 'chicken']
    const model = document.getElementById('model')
    const buttonContainer = document.getElementById('animationButtonsContainer')
    const buttons = [] // 用数组存储按钮元素，方便后续管理

    // 为每个动画创建专属按钮
    animationList.forEach(animName => {
      const button = document.createElement('button')
      button.textContent = `播放${animName}`
      button.style.margin = '0 8px 8px 0'
      
      // 绑定点击事件：切换到对应动画
      button.addEventListener('click', () => {
        model.setAttribute('animation-mixer', {
          clip: animName,
          loop: 'repeat',
          crossFadeDuration: 0.4,
        })
        // 可选：给当前激活的按钮添加样式标识
        buttons.forEach(btn => btn.classList.remove('active'))
        button.classList.add('active')
      })

      buttons.push(button) // 将生成的按钮存入数组
      buttonContainer.appendChild(button)
    })

    // 初始默认激活idle按钮并播放对应动画
    if (buttons.length > 0) {
      buttons[0].click()
    }
  },
})

export { animationButtonsComponent }

对应的HTML结构（需补充） #

你需要在页面中添加一个用于存放按钮的容器：

<div id="animationButtonsContainer"></div>
<a-entity id="model" gltf-model="#yourModel" animation-mixer="clip: idle"></a-entity>

关键说明 #

• 使用array.push()将动态生成的按钮元素存入buttons数组，方便后续统一管理（比如批量修改样式、绑定公共逻辑等）。
• 每个按钮直接绑定对应动画的播放逻辑，点击即可切换到指定动画，无需通过索引循环。
• 新增了可选的按钮激活样式，方便用户直观看到当前播放的动画对应的按钮。
• 初始通过模拟点击第一个按钮，确保页面加载时默认播放idle动画，和原逻辑保持一致。

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