javascript - JS - 如何提供 x 方向的平滑移动

Question

我想在 x 方向上提供平滑的移动。对象 A 的速度应该是对象 B 的两倍。不知何故，A 的运动看起来不平滑。 jsfiddle

JS

var ax = bx = 0;

window.requestAnimFrame = (function(){
    return window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();



(function animloop(){
    requestAnimFrame(animloop);
    render();
})();

function render() {
    ax+=4;
    $('.A').css("left", ax);

    bx++;
    $('.B').css("left", bx);
}

Answer 1

使其更平滑的一种方法是花费自上次渲染以来的时间:

var ax = bx = 0,
    start;

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();



(function animloop(timestamp) {
    if (!start) {
        start = timestamp;
    }
    var progress = timestamp - start;

    requestAnimFrame(animloop);
    render(progress);
})();

function render(progress) {
    $('.A').css("left", progress / 4);

    bx++;
    $('.B').css("left", progress / 16);

}

http://jsfiddle.net/b3v8kp7j/2/