Rembobiner une animation dans A-Frame
J'ai un a-video
quelque part dans ma scène. Lorsque je clique sur un bouton + à côté, cela déclenche une animation pour l'agrandir. Il rend également visible un bouton - afin de le redimensionner à sa taille d'origine.
J'ai réussi à faire la partie surdimensionnée sans trop de problèmes, mais je ne trouve pas de moyen d'inverser l'animation, de faire revenir l'a-vidéo à son échelle d'origine.
Voici ce que j'ai jusqu'à présent (adapté pour la brièveté):
<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? -->
L'animation de mise à l'échelle fonctionne bien, mais je ne trouve pas comment déclencher la partie de rembobinage comme décrit dans les commentaires.
Je suis assez nouveau dans AFrame, c'est probablement quelque chose de simple, mais une réponse pourrait aider des débutants comme moi.
Je vous remercie
Réponses
J'essaierais de le faire avec une deuxième animation:
- on fait ce que tu veux
- l'autre revient de l'état actuel à l'état "d'origine".
Disons avec une configuration un peu similaire à la vôtre
<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>
Le animation-manager
sera un composant personnalisé contenant toute la logique:
// 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")
})
}
})
Découvrez-le ici .