Блог

Главная - Вопросы по программированию - Перемотка анимации в кадре

Перемотка анимации в кадре

#javascript #aframe #webvr

#javascript #aframe #webvr

Вопрос:

У меня есть a-video где-то в моей сцене. Когда я нажимаю кнопку рядом с ней, она запускает анимацию для ее увеличения. Это также делает видимой a — button, чтобы вернуть ее к исходному размеру.

Мне удалось увеличить часть без особых проблем, но я не могу найти способ изменить анимацию, чтобы вернуть 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, вероятно, это что-то простое, но ответ может помочь новичкам вроде меня.

Спасибо

Ответ №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")
    })
  }
})

Проверьте это здесь .

Метки: