js 时间动画优化

function moveDivTimeBasedImprove(div, fps) {
var left = 0;
var current = +new Date;
var previous = +new Date;
var dt = 1000 / 60;
var acc = 0;
var param = 1;

function loop() {
var current = +new Date;
var passed = current - previous;
previous = current;
acc += passed;
while(acc >= dt) {
update(dt);
acc -= dt;
}
draw();
}

function update (dt) {
left += param * (dt * 0.12);
if (left > 300) {
left = 300;
param = -1;
} else if (left < 0) {
left = 0;
param = 1;
}
}

function draw() {
div.style.left = left + "px";
}

setInterval(loop, 1000 / fps);
}

moveDivTimeBasedImprove(document.getElementById("div7"), 60);
moveDivTimeBasedImprove(document.getElementById("div8"), 30);
moveDivTimeBasedImprove(document.getElementById("div9"), 10);

猜你喜欢

转载自www.cnblogs.com/love314159/p/8991649.html