precision

定义在动画过程中将字符串值四舍五入到的小数位数。
小数位数越多,动画就越精确。设置 0 将在动画过程中基本上去掉所有小数。
只有 CSS 属性、SVG 和 DOM 属性的字符串值会被四舍五入(例如 '120.725px''1.523'),并且四舍五入仅在动画过程中应用,动画的第一帧和最后一帧使用完整的值。

In 99% of cases, you won't need to increase the precision beyond 4, as the visual difference won't be noticeable. Lowering the precision can help in cases where you are animating many elements simultaneously, but can drastically reduce the visual quality and smoothness of your animations.
engine.precision = 1; // values will be rounded to 1 decimal place ('120.7px')

接受

  • A Number greater than or equal to 0 to define the number of decimal places
  • A Number lower than 0 to skip the rounding process

默认

4

精度代码示例

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() {
  engine.precision = this.value;
}

$range.addEventListener('input', onInput);
<div class="large row container"></div>
<div class="medium row">
  <fieldset class="controls">
    <input type="range" min=0 max=5 value=4 step=1 class="range" />
  </fieldset>
</div>