交替 V4

定义当 loop 参数设置为 true 或大于 1 时,动画的方向是否在每次迭代中交替。

接受

布尔值

默认值

false

要全局更改默认值,请更新 engine.defaults 对象。

import { engine } from 'animejs';
engine.defaults.alternate = true;

交替代码示例

import { animate } from 'animejs';

animate('.dir-normal', {
  x: '17rem',
  alternate: false, // Default
  loop: 1,
});

animate('.dir-alternate', {
  x: '17rem',
  alternate: true,
  loop: 1, // Required to see the second iteration
});

animate('.dir-alternate-reverse', {
  x: '17rem',
  alternate: true,
  reversed: true,
  loop: 1,
});
<div class="medium row">
  <div class="circle dir-normal"></div>
  <div class="padded label">alternate: false</div>
</div>
<div class="medium row">
  <div class="circle dir-alternate"></div>
  <div class="padded label">alternate: true</div>
</div>
<div class="medium row">
  <div class="circle dir-alternate-reverse"></div>
  <div class="padded label">alternate: true, reversed: true</div>
</div>