Spulen Sie eine Animation in A-Frame zurück
Ich habe a-video
irgendwo 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
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-manager
wird 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 .