javascript - 动画等待完全完成才能重新开始

Question

为什么动画结束时会有延迟？我无法弄清楚这一点。当它完成第一部分(即使所有 block 的宽度等于 300px)时，它会执行第二部分将其返回到 50px，然后等待整个动画结束，然后才开始另一个循环。有什么方法可以使 block 异步吗？这样他们就不会等待其他 block 完成动画。

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

<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>

Answer 1

您有一个从 0% 到 100% 的动画； 0%时，所有方 block 都处于静止状态；也为 100%；因此延迟。

最明显的方法是将一个动画分成四个，因此 block 是独立的:

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>