精度
定义在动画期间将字符串值四舍五入到多少位小数。
添加的小数位数越多,动画就越精确。 将 0
设置为实际上会删除动画期间的所有小数。
只有 CSS 属性、SVG 和 DOM 属性的字符串值会被四舍五入(例如, '120.725px'
, '1.523'
),并且舍入仅在动画期间应用,动画的第一帧和最后一帧使用完整值。
在 99% 的情况下,您不需要将精度提高到 4 以上,因为视觉差异不会很明显。 在同时为许多元素制作动画的情况下,降低精度可能会有所帮助,但会大大降低动画的视觉质量和平滑度。
engine.precision = 1; // values will be rounded to 1 decimal place ('120.7px')
接受
- 一个大于或等于
0
的Number
类型值,用于定义小数位数 - 一个小于
0
的Number
类型值,用于跳过舍入过程
默认值
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>