精度

定义动画期间字符串值四舍五入到的小数位数。
添加的小数位数越多,动画精度越高。将 0 设置为基本上会移除动画期间的所有小数位。
只有 CSS 属性、SVG 和 DOM 属性的字符串值会被四舍五入(例如,'120.725px', '1.523'),并且四舍五入仅在动画期间应用,动画的第一帧和最后一帧使用完整值。

在 99% 的情况下,您无需将精度提高到 4 以上,因为视觉差异将不明显。降低精度有助于同时动画许多元素的情况,但会大幅降低动画的视觉质量和流畅度。
engine.precision = 1; // values will be rounded to 1 decimal place ('120.7px')

接受

  • 一个大于或等于 0Number 类型值,用于定义小数位数。
  • 一个小于 0Number 类型值,用于跳过四舍五入过程。

默认值

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>