<div class="box">
<div class="title">60 fps:</div>
<div class="div green" id="div1"></div>
</div>
<div class="box">
<div class="title">30 fps:</div>
<div class="div red" id="div2"></div>
</div>
<div class="box">
<div class="title">10 fps:</div>
<div class="div blue" id="div3"></div>
</div>
body {
padding: 20px;
background: #f2f2f2;
}
.box{
width: 100%;
height: 200px;
position: relative;
}
.div {
width:100px;
height:100px;
line-height: 100px;
text-align: center;
background: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
position: absolute;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
View Compiled
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("div1"), 60);
moveDivTimeBasedImprove(document.getElementById("div2"), 30);
moveDivTimeBasedImprove(document.getElementById("div3"), 10);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.