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

Жаль, что нет встроенной функции переключения, но есть обратная функция, которая выполняет переключение внутреннего атрибута. 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 2

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

Для запуска reverse() анимация должна быть запущена один раз. Вы можете проверить это, оценив свойство: "начал". При первом запуске анимации это свойство будет установлено в значение 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 3

Что исправило для меня, так это juliangarnier / anime#577 (комментарий):

Я столкнулся с этой проблемой сегодня, вот мое решение в виде ручки .

Я думаю, что путаница возникает из-за того, когда анимация приостанавливается, и из-за того, как работает метод:

1. Анимация без зацикливания автоматически приостанавливается по достижении конца (или начале при перевороте).
2. Метод только изменяет направление воспроизведения и не приостанавливает приостановленную анимацию.

Делает reverse() на анимации, пока она выполняется, означает, что она будет продолжать воспроизведение в противоположном направлении, но если анимация находится в начале / конце (т.е. приостановлена), вам также нужно будет сделать play() чтобы начать снова.

Из его связанного CodePen:

      function toggle() {
  if (anim.began) {
    anim.reverse()
    
    if (anim.progress === 100 && anim.direction === 'reverse') {
      anim.completed = false
    }
  }

  if (anim.paused) {
    anim.play()
  }
}

Answer 4

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

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

Answer 5

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

boxGetsLarger.reverse();