A- 프레임에서 애니메이션 되감기

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

여기에서 확인 하십시오 .