Spulen Sie eine Animation in A-Frame zurück

Nov 26 2020

Ich habe a-videoirgendwo in meiner Szene eine. Wenn ich daneben auf ein + klicke, wird eine Animation ausgelöst, um sie zu vergrößern. Außerdem wird die Schaltfläche a - sichtbar gemacht, um sie auf die ursprüngliche Größe zu verkleinern.

Ich habe es geschafft, den Upsizing-Teil ohne zu viele Probleme zu erstellen, kann aber keinen Weg finden, die Animation umzukehren, damit das A-Video wieder in seinen ursprünglichen Maßstab zurückkehrt.

Folgendes habe ich bisher (für die Kürze angepasst):

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

Die Upscaling-Animation funktioniert einwandfrei, aber ich kann nicht herausfinden, wie der Rückspulteil ausgelöst werden kann, wie in den Kommentaren beschrieben.

Ich bin ziemlich neu bei AFrame, es ist wahrscheinlich etwas Einfaches, aber eine Antwort könnte Neulingen wie mir helfen.

Vielen Dank

Antworten

PiotrAdamMilewski Nov 26 2020 at 20:40

Ich würde es mit einer zweiten Animation versuchen:

  • man macht was du willst
  • der andere kehrt vom aktuellen Zustand in den "ursprünglichen" Zustand zurück.

Sagen wir mit einem Setup, das Ihrem ähnlich ist

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

Dies animation-managerwird eine benutzerdefinierte Komponente sein, die die gesamte Logik enthält:

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

Schau es dir hier an .