为什么这么大的震动？

Question

为什么图像/ div在移动时会受到如此大的冲击？

<div>*</div>

$(function() {    
    var fps = 30;
    var a = 0;

    draw = function() {
        a += 0.001;  
        var x = ((Math.cos(a)+1) /2) *90;
        var y = ((Math.sin(a)+1) /2) *90;

        $("div").css("left", x + "%");
        $("div").css("top", y + "%");
    }

    update_frame = function(fps) {
        draw();
        setTimeout(function(){
            update_frame(fps)
        }, (1000./fps));
    }

    update_frame(fps);
});

https://jsfiddle.net/clankill3r/gx4xp1vx/

Answer 1

我假设“震惊”你的意思是运动不顺畅。如果是这种情况，只需提高fps值。

var fps = 100;

Updated fiddle

这里的折衷是更快的刷新率需要更多的处理能力，这在移动多个元素或包含图像的元素时可能更明显 - 尤其是在较慢的系统上。