keepTime()

返回一个Function，它可以重建一个 Timer、 Animation或 Timeline ，同时跟踪其当前时间，从而允许在不破坏播放状态的情况下平滑地更新动画的参数。

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

const tracked = trackedAnimate();

参数

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

一个返回被跟踪的 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>