1

我正在开发 8th Wall 上的 Web-AR 动画，并有一个包含 5 个动画的模型。这些动画属于模型的不同组件。我想通过屏幕上的按钮与动画交互。多亏了这些按钮，有时可以同时播放多个动画。

这是我的问题：

我想多次播放这些动画，而且它们需要在最后一帧暂停。我在网上搜索了关于动画在最后一帧暂停的信息，我发现了动画混合器组件的“clampWhenFinished”属性。

问题是，如果我将“clampWhenFinished: true”属性与“循环：重复”一起使用，它不会在最后一帧停止。另一方面，如果我将“clampWhenFinished: true”属性与“loop: once”一起使用，它会在最后一帧停止，但是当我按下再次启动相同动画的按钮时，它不会再次播放动画。

您可以在下面看到相关的代码片段。我曾尝试使用超时功能来处理上述问题，但它会导致很多错误。除此之外，我试图用“timeScale”属性来处理这个问题，因为我不能将“clampWhenFinished：true”属性与“loop：repeat”一起使用。

const modelTop = document.getElementById('model_top')
const animationList = ['Animation_Door_Open', 'Animation_Door_Close', 'Animation_Basket_Low', 'Animation_Basket_Mid', 'Animation_Basket_Top']

topButton.onclick = topBasket
// Play animation.
const topBasket = () => {
  modelTop.setAttribute('animation-mixer', {
    clip: animationList[4],
    timeScale: 1,
    loop: 'repeat',
  })

// Pause animation.
  setTimeout(() => {
    modelTop.setAttribute('animation-mixer', {
      clip: animationList[4],
      timeScale: 0,
      loop: 'repeat',
    })
  }, 1900)
}

// Play animation reverse.
const topReverse = () => {
  modelTop.setAttribute('animation-mixer', {
    clip: animationList[4],
    timeScale: -1,
    loop: 'repeat',
  })

  // Pause animation.
  setTimeout(() => {
    modelTop.setAttribute('animation-mixer', {
      clip: animationList[4],
      timeScale: 0,
      loop: 'repeat',
    })
  }, 1800)
  isTopOpen = false
}

第二个问题是，我想在其他动画完成时触发动画。有没有像“事件监听器”这样的选项来解决这个问题？

4

0 回答 0