Question

如何提高画布动画的速度并仍能获得平稳移动的物体？

在我的例子中，一个男孩从画布的顶部移动到底部。运动似乎摇摆不定，y步越大。我怎样才能避免颠簸并且仍然快速移动到底部？

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

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


function redraw() {

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.beginPath();
    ctx.rect(20, y, 90, 90);
    ctx.fillStyle = "red";
    ctx.fill();
    y += 5;

}

Answer 1

您可以通过减少每帧的移动距离并提高帧速率来提高画布动画的速度并仍然获得平滑移动的对象。

RequestAnimationFrame是一种在给定硬件的情况下以合理的帧速率制作动画的高效方法，但它修复了帧速率。

您可以使用setInterval或setTimeout更多地控制帧速率，它接受第二个整数参数，该参数确定直到下一个回调的毫秒数（即帧速率）。

setInterval(function () {
  redraw();
}, 2);

http://jsfiddle.net/uq14c6bu/2/

画布 - 在没有颠簸的情况下提高动画速度

1 个答案: