画布 - 提高动画速度而不会颠簸答案

【问题标题】：Canvas - Increase animation speed without jolts画布 - 提高动画速度而不会颠簸
【发布时间】：2015-02-01 17:22:09
【问题描述】：

如何提高画布动画的速度并仍然获得平滑移动的对象？

在我的示例中，一个男孩正在从画布的顶部移动到底部。运动似乎摇晃起来，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;

}

【问题讨论】：

通过在requestAnimationFrame回调中直接增加y位置，你的动画会根据帧率在不同的设备上出现不同的效果，你应该使用基于时间的动画（blog.sklambert.com/using-time-based-animation-implement）并且闪烁可能是由于您正在清除整个画布然后重绘场景，您可以尝试通过翻转 2 个画布元素来进行双缓冲 (blog.bob.sh/2012/12/double-buffering-with-html-5-canvas.html)

标签： javascript html animation canvas

【解决方案1】：

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

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

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

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

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

【讨论】：