keepTime()

添加一个构造函数Function，它可以在媒体查询变化期间重新创建 Timer、 Animation或 Timeline ，同时跟踪其当前时间，从而允许在不中断播放状态的情况下无缝更新动画的参数。

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

参数

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

由构造函数返回的 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>