onPauseJS

当正在运行的动画被暂停时，无论是手动还是自动，都会执行一个函数。

当播放过程中发生以下任一情况时，动画会暂停：

The .pause() method is called
The .cancel() method is called
The .revert() method is called
All animation tweens are overlapped by another animation with composition: 'replace'
All animation targets have been removed

接受

一个 Function，其第一个参数是动画本身

默认

noop

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

import { engine } from 'animejs';
engine.defaults.onPause = self => console.log(self.id);

onPause 代码示例

import { animate, utils } from 'animejs';

const [ $animateButton, $pauseButton, $removeButton ] = utils.$('.button');
const [ $value ] = utils.$('.value');
const [ $circle ] = utils.$('.circle');

let paused = 0;
let alternate = 0;
let animation;

const animateX = () => {
  alternate = !alternate;
  animation = animate($circle, {
    x: () => (alternate ? 16 : 0) + 'rem',
    duration: 2000,
    onPause: () => $value.innerHTML = ++paused,
  });
}

const pauseAnimation = () => {
  if (animation) animation.pause();
}

const removeTarget = () => {
  utils.remove($circle);
}

animateX();

$animateButton.addEventListener('click', animateX);
$pauseButton.addEventListener('click', pauseAnimation);
$removeButton.addEventListener('click', removeTarget);

<div class="large row">
  <div class="circle"></div>
  <pre class="large log row">
    <span class="label">paused</span>
    <span class="value">0</span>
  </pre>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Animate x</button>
    <button class="button">Pause anim</button>
    <button class="button">Remove target</button>
  </fieldset>
</div>