onPause V4 JS

当正在运行的动画被暂停（手动或自动）时，执行一个函数。

当播放期间发生以下任何情况时，动画会暂停

调用了 .pause() 方法
调用了 .cancel() 方法
调用了 .revert() 方法
所有动画补间都被另一个 composition: 'replace' 的动画覆盖
所有动画目标已被移除

接受

一个 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>

上一个 下一个