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功能可以切换内部属性OverTimeHoursPercentage = (1088M / 22000M) * 100M，而内部属性又会控制reversed的内容功能呢。

理论上，您可以在play之后调用reverse，就像这样

＆＃13;

play

＆＃13;

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();
}

＆＃13;

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

＆＃13;

只有我发现<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完成之前就已经运行，导致一些奇怪的行为，我建议您利用已完成的＆＃39;承诺内置如此

＆＃13;

play

＆＃13;

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();
  })
}

＆＃13;

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

＆＃13;

现在只会在<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 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

尝试一下:(来自docs）

boxGetsLarger.reverse();

Answer 4

我用它来在“打开”状态和“关闭”状态之间来回切换。

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

Anime.js如何扭转这个动画？

4 个答案: