keepTime() V4

返回一个 Function，该函数重新创建一个 Timer、Animation 或 Timeline，同时跟踪其当前时间，从而允许无缝更新动画参数而不中断播放状态。

const trackedAnimate = utils.keepTime(() => animate(target, params));

const tracked = trackedAnimate();

参数

名称	接受
constructor	一个返回 `Timer`、`Animation` 或 `Timeline` 的 `Function`

一个返回被跟踪的 Timer、Animation 或 Timeline 的 Function

keepTime() 代码示例

import { animate, utils } from 'animejs';

const [ $button ] = utils.$('button');
const clocks = utils.$('.clock');
let targetIndex = 0;

const animateNextTarget = utils.keepTime(() => {
  if (targetIndex > clocks.length - 1) targetIndex = 0;
  return animate(clocks[targetIndex++], {
    color: ['#B7FF54', '#FF4B4B'],
    rotate: 360,
    ease: 'linear',
    duration: 8000,
    loop: true,
  })
});

animateNextTarget();

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

<div class="large row spaced-evenly">
  <div class="col">
    <div class="clock input"></div>
  </div>
  <div class="col">
    <div class="clock lerped"></div>
  </div>
  <div class="col">
    <div class="clock lerped-15"></div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>Switch target</button>
  </fieldset>
</div>