addOnce()

添加一个构造函数到一个 Scope，该构造函数只被调用一次，允许你执行一次代码并添加作用域动画，这些动画在媒体查询更改时不会被还原。

scope.addOnce(constructor);

名称	接受
构造函数	一个构造函数 `Function`

Scope 本身

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

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

addOnce() 代码示例

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.add(() => {
    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>

Anime.js | JavaScript 动画引擎

addOnce()

返回

addOnce() 代码示例