在 A 帧中倒带动画 [英] Rewind an animation in A-Frame

问题描述

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

I have an a-video somewhere in my scene. When I click a + button next to it, it triggers an animation to scale it up. It also makes visible a - button in order to scale it back to its original size.

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

I managed to make the upsizing part without too many issues, but can't find a way to reverse the animation, to make the a-video return to its original scale.

以下是我目前所拥有的(为简洁起见):

Here is what I have so far (adapted for briefness):

<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? -->

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

The upscaling animation works fine, but I can't find how to trigger the rewinding part as described in the comments.

我对 AFrame 还很陌生，这可能很简单，但答案可以帮助像我这样的新手.

I'm fairly new to AFrame, it's probably something simple, but an answer could help rookies like me.

谢谢

推荐答案

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

I'd try doing it with a second animation:

• 一个人做你想做的
• 另一个从当前状态返回到原始"状态状态.

假设与您的设置有些相似

Lets say with a setup somewhat similar to yours

<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 将是一个 自定义组件 包含所有逻辑:

The animation-manager will be a custom component containing all the logic:

// 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")
    })
  }
})

在此处查看.

这篇关于在 A 帧中倒带动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！