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

遗憾的是，没有内置的切换函数，但有一个reverse函数，它的作用是切换内部属性reversed，该属性反过来控制play函数的功能。

理论上，您可以在play之后调用reverse，如下所示

​

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>

​

只是我发现在play结束之前reverse正在运行，导致了一些奇怪的行为，我建议利用内置的“完成”承诺，如下所示

​

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()，动画必须运行一次。您可以通过计算属性“began”来检查这一点。第一次运行动画时，此属性将设置为“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 (comment)

我今天遇到了这个问题，这里是my solution as a pen。

我认为混淆源于动画何时暂停，以及reverse()方法是如何工作的：

当非循环动画到达结尾(反转时为开始)时，它们将自动暂停。

• reverse()方法仅更改播放方向，不会取消暂停的动画。

对正在进行的动画执行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()
  }
}