keepTime()

添加一个构造函数 Function，用于在媒体查询更改之间重新创建 Timer、Animation 或 Timeline，同时跟踪其当前时间，从而允许无缝更新动画参数而不破坏播放状态。

scope.keepTime(() => animate(target, parameters));

参数

名称	接受
构造函数	一个返回 `Timer`、`Animation` 或 `Timeline` 的 `Function`

由构造函数返回的 Timer、Animation 或 Timeline

scope.keepTime() 调用不能是条件性的，因为这会失去其目的，并会扰乱对哪些回调已执行或未执行的跟踪。

// Don't do this
if (scope.matches.small) {
  scope.keepTime(() => animate(target, params));
}
// Do this
scope.keepTime(() => animate(target, params));

keepTime() 代码示例

import { createScope, createTimeline, utils, stagger } from 'animejs';

const scope = createScope({
  mediaQueries: {
    isSmall: '(max-width: 200px)',
  }
})
.add(self => {
 
  self.addOnce(() => {
    /* Animations declared here won't be reverted between mediaqueries changes */
    createTimeline().add('.circle', {
      backgroundColor: [
        $el => utils.get($el, `--hex-red-1`),
        $el => utils.get($el, `--hex-citrus-1`),
      ],
      loop: true,
      alternate: true,
      duration: 2000,
    }, stagger(100));
  });
 
  self.keepTime(() => createTimeline().add('.circle', {
    x: self.matches.isSmall ? [-30, 30] : [-70, 70],
    scale: [.5, 1.1],
    loop: true,
    alternate: true,
  }, stagger(100)).init());
      
});

<div class="iframe-content resizable">
  <div class="scopped small centered">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>