在 A 帧中倒带动画

Question

我的场景中某处有一个 a-video。当我点击它旁边的 + 按钮时，它会触发一个动画来放大它。它还使 - 按钮可见，以便将其缩放回原始大小。

我设法在没有太多问题的情况下制作放大部分，但找不到反转动画的方法，使 a-video return 达到其原始比例。

这是我目前所掌握的（为简洁起见进行了改编）：

<a-video animation="property: scale; to: 20 20 20; dur: 200; dir: alternate; startEvents: startplay" src="#myvid" id="avideo"></a-video>
<a-image src="#play" onclick="document.getElementById('avideo').emit('startplay')"></a-image>
<a-image src="#pause" onclick="????"></a-image> <!-- is it possible to play the animation rewind here since I specified dir: alternate on #avideo? -->

放大动画效果很好，但我找不到如何触发评论中描述的倒带部分。

我是 AFrame 的新手，它可能很简单，但答案可以帮助像我这样的菜鸟。

谢谢

Answer 1

我会尝试用第二个动画来做：

随心所欲
另一个returns从当前状态到“原始”状态。

假设设置与您的设置有些相似

<a-sphere animation__play="property: scale; from: 1 1 1; to: 5 5 5; dur: 2000; dir: alternate; startEvents: play-anim; pauseEvents: pauseA-anim; stopEvents: stop-anim; loop: true"
          animation__rewind="property: scale; to: 1 1 1; easing: linear; startEvents: rewind-anim"
          animation-manager>
</a-sphere>

animation-manager 将是一个包含所有逻辑的 custom component：

// custom component declaration
AFRAME.registerComponent("animation-manager", {
  // called upon initialization
  init: function() {
     // manage pressing the play image / button
     playBtn.addEventListener("click", e => this.el.emit("play-anim"));
     
     // manage the rewind image / button
     rewindBtn.addEventListener("click", e => {
       // set the current scale as the "starting point"
      this.el.setAttribute("animation__rewind", "from", this.el.getAttribute("scale"))
      
      // pause the current animation
      this.el.emit("pause-anim")
      // play the rewind animation
      this.el.emit("rewind-anim")
    })
  }
})

看看here。

在 A 帧中倒带动画

Rewind an animation in A-Frame

javascript

webvr

aframe