基于时间的动画算法

一、如果循环时间 等于 过程动画时间：

function moveDivTimeBased(div, fps) {
    var left = 0;
    var current = +new Date;
    var previous = +new Date;
    var param = 1;

    function loop() {
        var current = +new Date;
        var dt = current - previous; // 计算时间差
        previous = current;
        update(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);
}

二、如果循环时间 与 动画时间 不相等 

　　每次小方块碰到边缘的时候，都会损失掉一部分时间，而且帧率越低的损失越大

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

    // update 和 draw 函数不变
    setInterval(loop, 1000 / fps);
}

 转载于：http://www.w3cplus.com/animation/javascript-animation-algorithm-based-on-time.html

转载于:https://www.cnblogs.com/hjsblogs/p/5880629.html