jquery - 为什么移动一个 div 会如此震撼

Question

为什么images/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

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