持久化 V4 WAAPI

默认情况下，WAAPI 动画在完成时会自动取消并从内存中释放。这是为了防止动画永久运行并导致潜在的内存泄漏。

这种行为在使用方法对已完成的 WAAPI 动画调用时会引发问题，因为动画将不再处于活动状态。

persist 参数解决了这个问题，并使动画在完成时保持活跃状态。

接受

布尔值

默认值

false

对于滚动控制的 WAAPI 动画，persist 参数会自动设置为 true。

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

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

persist 代码示例

import { waapi, utils } from 'animejs';

const [ $button ] = utils.$('.button');

const animationA = waapi.animate('.square-a', {
  x: '17rem',
  persist: false, // default
});

const animationB = waapi.animate('.square-b', {
  x: '17rem',
  persist: true,
});

const alaternateAnimations = () => {
  animationA.alternate().resume();
  animationB.alternate().resume();
};

$button.addEventListener('click', alaternateAnimations);

<div class="medium row">
  <div class="square square-a"></div>
  <div class="padded label">persist: false</div>
</div>
<div class="medium row">
  <div class="square square-b"></div>
  <div class="padded label">persist: true</div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Alternate</button>
  </fieldset>
</div>