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完成后反转方向。

我希望你觉得这有帮助。