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

Question

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

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% 时，所有块都处于静止状态；也为 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>

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

Animation waits to fully finish to start it over

javascript

anime.js