iterations
iterations 参数被 loop 参数取代,它决定动画重复的次数,而不是总迭代次数。
iterations |
循环 |
效果 |
|---|---|---|
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>