平滑画布动画 [英] Smooth Canvas Animation

问题描述

我正在尝试学习如何使用HTML5的画布创建平滑的JavaScript动画.由于某些原因，动画不是平滑的，而是一种溅射".

I'm trying to learn how to create smooth JavaScript animations using HTML5's canvas. For some reason, the animation is not smooth, but kind of "sputtery".

您可以看到我基于此jsFiddle 构建的框架，该框架目前仅使用Webkit属性

You can see the framework I've built on this jsFiddle, which only uses Webkit properties at the moment.

另一位开发人员能够使用其WebViews源代码创建相同的概念，该源代码基于 Ext.js .出于学习目的，我想避免使用任何库来更好地理解JavaScript.可以在此jsFiddle 中查看WebViews概念，该动画显示得更加流畅.

Another developer was able to create the same concept using their WebViews source code, which is based on Ext.js. For learning purposes, I wanted to avoid using any libraries in effort to better understand JavaScript. The WebViews concept can be viewed at this jsFiddle, which shows a much smoother animation.

我已经阅读并尝试了各种不同的场景，包括将update调用从requestAnimationFrame中拉出到其自己的循环中，将上下文转换为绘制位置，绘制为后缓冲区上下文并将其复制到视口.以下代码代表了我迄今为止的最大努力.

I've read and tried all kinds of different scenarios from pulling the update calls out of the requestAnimationFrame into it's own loop, to translating the context to the draw position, to drawing to a back-buffer context and copying it to the viewport. The following code represents my best efforts so far.

关于如何提高性能以使对象在没有外部库的所有开销的情况下平稳移动的任何建议?

谢谢.

var app;
var now = then = delta = 0;
var viewport = document.createElement( 'canvas' );
var viewportContext = viewport.getContext( '2d' );

function App( )
{
    this.circle = {
        position : viewport.width / 2,
        radius : 10
    };
}

App.prototype.initialize = function( )
{
    app = this;
    document.body.appendChild( viewport );
    viewport.width = 320;
    viewport.height = 200;

    webkitRequestAnimationFrame( app.render, viewport );
};

App.prototype.render = function( )
{
    now = performance.webkitNow( );
    delta = ( now - then ) / 1000.0;
    then = now;

    app.update( delta );
    viewportContext.clearRect( 0, 0, viewport.width, viewport.height );
    app.draw( viewportContext );

    webkitRequestAnimationFrame( app.render, viewport );
};

App.prototype.draw = function( context )
{
    context.fillStyle = "white";
    context.beginPath( );
    context.arc( this.circle.position | 0, viewport.height / 2 | 0, this.circle.radius | 0, 0, Math.PI * 2, true );
    context.closePath( );
    context.fill( );
};

App.prototype.update = function( deltaTime )
{
    this.circle.position += viewport.width / 5 * deltaTime;

    if( this.circle.position >= viewport.width )
    {
        this.circle.position = 0;
    }
};

window.onload = function( )
{
    new App( ).initialize( );
};​

推荐答案

请参见此页面获取许多常见的优化，以及有关为什么以及如何提高性能的很好的解释.

See this page for many common optimizations, and great explanations about why and how they improve performance.

此外，由于某种原因，在中等大小"的画布上性能似乎有所提高.我不确定为什么会这样，但是我认为这与浏览器优化有关.

Also, for some reason, performance seems to increase on a more "medium-size" canvas. I'm not entirely sure why this is, but I believe it has to do with browser optimization.

您可以通过以下一些小调整来注意到一些性能提升: http://jsfiddle.net/3TAVu/1/

You can note some performance gains with a few small tweaks here: http://jsfiddle.net/3TAVu/1/

具体地说，我在这里删除了多余的对fillStyle的分配:

Specifically, I removed the superfluous assignment to fillStyle here:

App.prototype.draw = function( context )
{
    context.beginPath( );
    context.arc( this.circle.position | 0, viewport.height / 2 | 0, this.circle.radius | 0, 0, Math.PI * 2, true );
    context.closePath( );
    context.fill( );
};

我还通过仅清除画布的相关部分而不是全部内容来修改了render方法:

I also modified the render method by clearing only the relevant portion of the canvas instead of the entire thing:

App.prototype.render = function( )
{
    now = performance.webkitNow( );
    delta = ( now - then ) / 1000.0;
    then = now;

    var cX = app.circle ? (app.circle.position - app.circle.radius) : 0;
    var cY = Math.round(viewport.height/2) - app.circle.radius;
    var w = app.circle ? app.circle.radius * 2 : 0;

    viewportContext.clearRect(cX - 1, cY - 1, w + 2, w + 2);

    app.update( delta );
    app.draw( viewportContext );

    webkitRequestAnimationFrame( app.render, viewport );
};

这篇关于平滑画布动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！