迭代次数

iterations 参数被 loop 参数取代，并决定动画重复的次数，而不是总的迭代次数。

`迭代次数`	`循环`	效果
`1`	`0`	不重复
`3`	`2`	重复两次
`无限`	`Infinity` \| `true` \| -1	无限重复

语法比较

Anime.js

waapi.animate('.square', {
  x: 100,
  loop: 3
});

WAAPI 等效项

const targets = document.querySelectorAll('.square');

targets.forEach(($el, i) => {
  $el.animate({
    translate: '100px',
  }, {
    fill: 'forwards',
    duration: 1000,
    iterations: 4
  })
});

接受

一个 Number 类型的值 [0, Infinity]
一个 Boolean 类型的值，其中 true 等同于 Infinity，而 false 则不循环

迭代次数代码示例

import { waapi, stagger } from 'animejs';

waapi.animate('.square', {
  translate: '17rem',
  loop: 3,
  alternate: true,
  delay: stagger(100)
});

<div class="medium row">
  <div class="square"></div>
</div>
<div class="medium row">
  <div class="square"></div>
</div>
<div class="medium row">
  <div class="square"></div>
</div>