Question

为什么动画结束时会有延迟？我不知道这个。当完成第一部分时，即使所有块的宽度等于300px，第二部分将其返回到50px，然后等待整个动画结束，然后再开始另一个循环。有什么方法可以使块异步？这样他们就不必等待其他块来完成动画了。

Tuple

anime({
  targets: '.b-main > div',
  width: [
    { value: 300, duration: 1200},
    { value: 50, duration: 1200}
  ],
  easing: 'easeInOutBack',
  duration: 5000,
  delay: function(el, i, l) {
    return i * 300;
  },
  loop: true
});

.b-main > div {
  background-color: red;
  width: 50px;
  height: 50px;
  margin: 20px;
}

Answer 1

您有一个动画从0％变为100％；在0％时，所有块均处于静止状态；同样是100％因此是延迟。

最明显的方法是将一个动画分成四个，所以块是独立的：

const targets = document.querySelectorAll('.b-main > div');

targets.forEach((target, i) =>
  setTimeout(() =>
    anime({
      targets: target,
      width: [
        { value: 300, duration: 1200},
        { value: 50, duration: 1200}
      ],
      easing: 'easeInOutBack',
      duration: 5000,
      loop: true
    }),
    i * 300
  )
);

.b-main > div {
  background-color: red;
  width: 50px;
  height: 30px;
  margin: 10px;
}

<script src="https://animejs.com/lib/anime.min.js"></script>

<div class="b-main">
  <div class="b1"></div>
  <div class="b2"></div>
  <div class="b3"></div>
  <div class="b4"></div>
</div>

动画等待完全完成以重新开始

1 个答案: