基于时间的动画算

来源：互联网发布：客所思声卡变女声数据编辑：程序博客网时间：2024/06/05 06:30

HTML:

<div class="title">60 fps:</div><div class="div green" id="div7"></div><div class="title">30 fps:</div><div class="div red" id="div8"></div><div class="title">10 fps:</div><div class="div blue" id="div9"></div>

CSS:

body {  padding: 20px;}.div {    width: 30px;    height: 20px;    position: relative;}.green {    background-color: green;}.red {    background-color: red;}.blue {    background-color: blue;}

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);

0 0