onPause V4

当正在运行的时间线手动或自动暂停时，执行一个函数。

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

调用了 .pause() 方法
调用了 .cancel() 方法
调用了 .revert() 方法
所有子动画 tween 被另一个时间线或动画以 composition: 'replace' 覆盖
所有子动画目标已被移除，并且没有其他定时器处于活动状态

接受

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

默认值

noop

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

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

onPause 代码示例

import { createTimeline, utils } from 'animejs';

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

let paused = 0;
let alternate = 0;
let tl;

const animateShapes = () => {
  alternate = !alternate;
  const x = (alternate ? 15 : 0) + 'rem';
  const rotate = (alternate ? 360 : -360);
  tl = createTimeline({
    defaults: { duration: 2000 },
    onPause: () => $value.textContent = ++paused
  })
  .add($circle, { x }, 0)
  .add($triangle, { x }, 0)
  .add($square, { x }, 0)
  .add(shapes, { rotate }, 0);
}

const pauseTL = () => {
  if (tl) tl.pause();
}

const removeTargets = () => {
  utils.remove(shapes);
}

animateShapes();

$animateButton.addEventListener('click', animateShapes);
$pauseButton.addEventListener('click', pauseTL);
$removeButton.addEventListener('click', removeTargets);

<div class="large row">
  <div class="medium pyramid">
    <div class="shape triangle"></div>
    <div class="shape square"></div>
    <div class="shape circle"></div>
  </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">Create TL</button>
    <button class="button">Pause TL</button>
    <button class="button">Remove shapes</button>
  </fieldset>
</div>

上一个 下一个