ए-फ्रेम में एनीमेशन को रीवाइंड करें

Question

मैं एक है a-videoमेरी दृश्य में कहीं। जब मैं इसके बगल में एक + बटन पर क्लिक करता हूं, तो यह एक एनीमेशन को ट्रिगर करता है ताकि इसे स्केल किया जा सके। यह अपने मूल आकार में वापस स्केल करने के लिए दृश्यमान बटन भी बनाता है।

मैं बहुत अधिक मुद्दों के बिना अपकमिंग भाग बनाने में कामयाब रहा, लेकिन एनीमेशन को उलटने का कोई तरीका नहीं खोज सका, ताकि वीडियो को उसके मूल पैमाने पर वापस लाया जा सके।

यहाँ मेरे पास अब तक है (संक्षेप के लिए अनुकूलित):

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

अपसंस्कृति एनीमेशन ठीक काम करता है, लेकिन मुझे पता नहीं है कि टिप्पणियों में वर्णित रीवाइंडिंग भाग को कैसे ट्रिगर किया जाए।

मैं AFrame के लिए काफी नया हूं, यह शायद कुछ सरल है, लेकिन एक उत्तर मेरी तरह बदमाशों की मदद कर सकता है।

धन्यवाद

Answer 1

मैं इसे एक दूसरे एनीमेशन के साथ करने की कोशिश करूँगा:

• एक वही करता है जो आप चाहते हैं
• वर्तमान स्थिति से "मूल" स्थिति में अन्य रिटर्न।

चलो एक सेटअप के साथ कहते हैं कि कुछ हद तक आपके समान है

<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एक हो जाएगा कस्टम घटक सभी तर्क युक्त:

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

इसे यहां देखें ।