使用图像作为框架显示动画的最佳方式是什么？

Question

我打算通过一个接一个地快速显示几张图像来播放一个简短的动画。图像将是动画帧。我想要60 fps。当然，图像将被预加载。我不想使用<video> 标签有一些原因。

就我而言，有两种选择：

• 更改图片标签的src标签
• 在<canvas> 中显示图像，如here 所述

在为所有浏览器编写复杂的基准测试之前，我想问问有经验的人：

1. 最好的方法是什么？
2. 这些方法或加快速度的方法是否存在任何缺陷？

Answer 1

您想要的解决方案是画布。
只有有了它，您才能（轻松）使用一个或一组简化的图形文件来制作动画。
由于您负担不起要下载一千个文件，您实际上需要处理打包文件，这可能看起来像：

这样的文件可以包含几个字符或任何图形。

加载图像后，您必须计算每一帧的纹理坐标。
动画是一系列帧。
这里画布的关键方法是 drawImage，它有 9 个参数风格，允许剪辑/调整大小/...图像。

我做了一些说明，但您应该认真考虑使用动画框架，它可能为您提供最有价值的工具（动画过渡，引用一个）。

在这里提琴：http://jsfiddle.net/gamealchemist/Vn2Nt/

// array containig texture coords of all frames.
var textureCoords = [];

// fill the textureCoords using image img, assuming
//   frames are tiled in a 'regular way', sized tw X th, 
//   uses only cnt frames.
function fillTextureCoords(img, tw, th, cnt) {
    var w = img.width,
        h = img.height;
    var hCount = Math.floor(w / tw),
        vCount = Math.floor(h / th);
    for (var vIndex = 0; vIndex < vCount; vIndex++)
    for (var hIndex = 0; hIndex < hCount; hIndex++) {
        textureCoords.push({
            u: hIndex * tw,
            v: vIndex * th,
            w: tw,
            h: th
        });
        cnt--;
        if (!cnt) return;
    }
}

// frames of the animation. 
// Contains index to the textureCoords array.
var frames = [];

for (var i = 0; i < 14; i++) frames.push(i);

// duration of a single frame.
var frameDuration = 150;

// current time of the animation (ms).
var animationStatus = 0;

// draws at (0,0) the current animation frame
function drawThatFrame() {
    var whichFrame = Math.floor(animationStatus / frameDuration);
    whichFrame %= frames.length;
    var tCoord = textureCoords[frames[whichFrame]];
    context.drawImage(myBird, tCoord.u, tCoord.v, tCoord.w, tCoord.h, 0, 0, tCoord.w, tCoord.h);
}

Answer 2

我建议按照您的第二个选项中的建议在画布中显示图像。这样做的原因是，虽然您可以确保图像在 DOM 中预加载，但您无法控制它们何时从源解码为图像数据——通常这将发生在它们在文档中可见的那一刻，这可以（确实如此！）导致执行延迟，这将影响您的帧速率。使用画布您还可以对图像数据进行预解码，从而获得更流畅的动画效果。

我最近使用了他的技术，当时我为信息亭编写的一些类似幻灯片的软件在预加载的图像首次滑入视图时出现帧速率严重下降（60 FPS 到 20 FPS）：使用 Chrome 的开发工具的时间线功能I was able to isolate the image decoding step as locking UI for 50-100 milliseconds，我通过使用画布提前解码图像来完全避免这种情况。

Answer 3

使用类似的东西：

// this is a useful shim for requestAnimationFrame. I copied it from somewhere else:
window.requestAnimFrame = function(){
    return (
        window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(/* function */ callback){
            window.setTimeout(callback, 1000 / 60);
        }
    );
}();

var currentFrameTime, previousFrameTime, timeBetweenFrames;
var playbackStartTime = Date.now();
var timePerFrame = 1000/60.0;

function updateFrame(frameNumber) {
    requestAnimFrame(updateFrame);

    currentFrameNumber = parseInt((currentFrameTime - playbackStartTime) / timePerFrame);

    showImage(frameNumber);
}

它将显示高达每秒 60 帧，但播放速度不会太快或太慢。

Answer 4

我会将所有图像与position:absolute; 放在一个div 中，然后使用jQuery each 函数顺序隐藏图像。