速度

控制引擎管理的所有动画的全局播放速率。
大于 1 的值会加速动画，而介于 0 和 1 之间的值会减速动画。

调整全局播放速率对于同时在所有动画上创建慢动作或快进效果非常有用。

engine.speed = 0.5; // Run all animations at half speed

接受

大于或等于 0 的 Number 类型

默认值

1

速度代码示例

import { engine, animate, utils } from 'animejs';

const [ $container ] = utils.$('.container');
const [ $range ] = utils.$('.range');

for (let i = 0; i < 150; i++) {
  const $particle = document.createElement('div');
  $particle.classList.add('particle');
  $container.appendChild($particle);
  animate($particle, {
    x: utils.random(-10, 10, 2) + 'rem',
    y: utils.random(-3, 3, 2) + 'rem',
    scale: [{ from: 0, to: 1 }, { to: 0 }],
    delay: utils.random(0, 1000),
    loop: true,
  });  
}

function onInput() {
  utils.sync(() => engine.speed = this.value);
}

$range.addEventListener('input', onInput);

<div class="large row container"></div>
<div class="medium row">
  <fieldset class="controls">
    <input type="range" min=0.1 max=2 value=1 step=.01 class="range" />
  </fieldset>
</div>

上一项 下一项