frameRateJS
确定动画播放的每秒帧数(fps)。
此值可以稍后通过 animation.fps = 30 进行修改。
接受
大于 0 的 数字
帧率被限制在显示器刷新率或在某些情况下被浏览器自身限制。
默认
120
要全局更改默认值,请更新 engine.defaults 对象。
import { engine } from 'animejs';
engine.defaults.frameRate = 30;
帧率代码示例
import { animate } from 'animejs';
const [ $range ] = utils.$('.range');
const [ $fps ] = utils.$('.fps');
const animation = animate('.circle', {
x: '16rem',
loop: true,
alternate: true,
frameRate: 60,
});
const updateFps = () => {
const { value } = $range;
$fps.innerHTML = value;
animation.fps = value;
}
$range.addEventListener('input', updateFps);
<div class="large row">
<div class="circle"></div>
<pre class="large log row">
<span class="label">fps</span>
<span class="fps value">60</span>
</pre>
</div>
<div class="medium row">
<fieldset class="controls">
<input type="range" min=0 max=120 value=60 step=1 class="range" />
</fieldset>
</div>