2

我从以下地址的代码开始：

http://demos.sixrevisions.com/2010/09/11/demo.html

我将其更新为使用 requestAnimFrame，如下所示：

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

该演示可在此处获得：

http://jsfiddle.net/XBssp/1/

在我看来，在 Chrome 下运行时，动画在更高的速度下仍然显得有些模糊。我可以做哪些进一步的优化？

4

2 回答 2

2

我不知道你所说的模糊是什么意思，但是 20 像素的步数会使动画非常粗糙（降低它们以使球不那么模糊/“跳跃”）。

无论如何，如果您想优化此代码，您可以调整以下内容：

//put this outside the loop, no need to get it everytime
context= myCanvas.getContext('2d');

//record previous position and size and only clear that area
//instead of the complete canvas for each time
context.clearRect(0,0,300,300);

//pre-render this object to an off-screen canvas and use
//drawImage(osCanvas, x, y) instead
context.beginPath();
context.fillStyle="#0000ff";
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();

当然requestAnimationFrame，在可用时使用以使动画与监视器 vblank 保持同步（消除混蛋）。

但是把它放在你的主循环中。

以下是这些优化的结果：http:
//jsfiddle.net/AbdiasSoftware/XBssp/6/

没有这么多 DOM 元素和 iframe：http:
//jsfiddle.net/AbdiasSoftware/XBssp/6/embedded/result/

您无法对 DOM 更新做任何事情，因此为了减少事件队列中重绘和其他事件的影响，建议在同一窗口中包含尽可能少的其他元素。尽可能为元素使用固定或绝对位置，避免阴影和圆角边框。

优化方法的源输出：

function draw() {
    //here we only clear last draw and draw the cached ball
    context.clearRect(oldX - 2, oldY -2 ,dia +4,dia +4);
    context.drawImage(canvas,x, y);

    oldX = x; //store the current x/y as old x/y for next loop
    oldY = y;

    if( x<0 || x>300) dx=-dx;
    if( y<0 || y>300) dy=-dy;

    x+=dx;
    y+=dy;
    requestAnimationFrame(draw);
}

//function to create cached ball
function createBall() {
    canvas = document.createElement('canvas');
    canvas.width = dia;
    canvas.height = dia;
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.fillStyle="#0000ff";
    ctx.arc(rad,rad,rad,0,Math.PI*2,true);
    ctx.fill();
}

createBall(); //create ball
draw();       //start anim
于 2013-06-22T00:36:25.527 回答
2

jsFiddle Demo

很好的动画，你很接近:)

一些事情。首先，当您制作动画时，您通常希望有小步，这样您正在制作动画的项目就不会断断续续。其次，确保在以小步骤制作动画时以高频率进行（您已涵盖该部分）。第三，当动画对象和碰撞检测是一个问题时，请确保将边界偏移对象的尺寸。

我的演示改变了第一个和第三个音符。

var dx=4;
var dy=4;

和

if( x < 20 || x > 280)
dx=-dx;
if( y < 20 || y > 280)

我还使示例的边界框更加清晰。

于 2013-06-22T01:06:17.850 回答