Rebobinar una animación en A-Frame

Question

Tengo un a-videolugar en mi escena. Cuando hago clic en un botón + junto a él, activa una animación para escalarlo. También hace visible un botón - para volver a escalarlo a su tamaño original.

Me las arreglé para hacer la parte de ampliación sin demasiados problemas, pero no puedo encontrar una manera de revertir la animación, para hacer que el video regrese a su escala original.

Esto es lo que tengo hasta ahora (adaptado para brevedad):

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

La animación de ampliación funciona bien, pero no puedo encontrar cómo activar la parte de rebobinado como se describe en los comentarios.

Soy bastante nuevo en AFrame, probablemente sea algo simple, pero una respuesta podría ayudar a los novatos como yo.

Gracias

Answer 1

Intentaría hacerlo con una segunda animación:

• uno hace lo que quiere
• el otro regresa del estado actual al estado "original".

Digamos con una configuración algo similar a la suya

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

El animation-managerserá un componente personalizado que contiene toda la lógica:

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

Compruébalo aquí .