Anime.js, как отменить эту анимацию?

Question

Я недавно начал работать с Anime.js, чтобы анимировать свои дизайны, и я застрял в этом некоторое время, держу пари, что для многих это очень просто!У меня есть кнопка, которая увеличивает мой div и я бы хотел вернуть div в исходное состояние, если снова щелкнуть значок.Мой HTML:

var boxGetsLarger = anime({
  targets: '.agent-button',
  width: {
    value: '+=300',
    duration: 200,
    easing: 'linear'
  },
  borderRadius: {
    value: 83
  },
  duration: 200,
  height: {
    value: '+=20'
  },
  easing: 'linear',
  autoplay: false

});


document.querySelector('.agent-button').onclick = boxGetsLarger.play;

.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

Answer 1

Я использую это для переключения анимации anime.js на одну кнопку.

Чтобы инициировать реверс (), анимация должна быть запущена один раз.Вы можете проверить это, оценив свойство: «начал».При первом запуске анимации это свойство будет установлено в значение true.

console.log(boxGetsLarger); // began: false

document.querySelector('.agent-button').onclick = function() {

    boxGetsLarger.play();

    if (boxGetsLarger.began) {
        boxGetsLarger.reverse();
    }

   console.log(boxGetsLarger); // began: true

}

Answer 2

Жаль, что нет встроенной функции переключения, но есть функция реверс , которая выполняет переключение внутреннего атрибута reversed, который, в свою очередь, контролирует, что делает функция play.

Теоретически, вы можете просто позвонить reverse после play примерно так

var boxGetsLarger = anime({
  targets: '.agent-button',
  width: {
    value: '+=300',
    duration: 200,
    easing: 'linear'
  },
  borderRadius: {
    value: 83
  },
  duration: 200,
  height: {
    value: '+=20'
  },
  easing: 'linear',
  autoplay: false
});

document.querySelector('.agent-button').onclick = function() {
  boxGetsLarger.play();
  boxGetsLarger.reverse();
}

.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

Только я обнаружил, что reverse работал до того, как play закончил, что привело к некоторому странному поведению, я бы порекомендовал воспользоватьсяГотово, обещание встроено, вот так

var boxGetsLarger = anime({
  targets: '.agent-button',
  width: {
    value: '+=300',
    duration: 200,
    easing: 'linear'
  },
  borderRadius: {
    value: 83
  },
  duration: 200,
  height: {
    value: '+=20'
  },
  easing: 'linear',
  autoplay: false
});

document.querySelector('.agent-button').onclick = function() {
  boxGetsLarger.play();
  boxGetsLarger.finished.then(() => {
    boxGetsLarger.reverse();
  })
}

.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

Теперь это будет изменять направление только после завершения play.

Надеюсь, вы найдете это полезным.

Answer 3

Я использовал это для переключения между «открытым» состоянием и «закрытым» состоянием.

  const toggle = (animation, open) => {
    if (open) {
      animation.play();
      if (animation.reversed) {
        animation.reverse();
      }
    } else {
      animation.play();
      if (!animation.reversed) {
        animation.reverse();
      }
    }
  }

Answer 4

Попробуйте: (из документов )

boxGetsLarger.reverse();