javascript - 使用 HTML5/CSS3 以老式方式执行图像动画(这意味着 Sprite 动画!)

Question

所以我尝试使用 Sprite 表来执行动画。我已经放弃了 Canvas 并沿着 HTML5/CSS3 路线在屏幕上显示图像，但在开始之前就遇到了潜在的绊脚石。

这是一个示例 Sprite 表(请原谅可怕的程序员艺术):

http://img690.imageshack.us/img690/9126/stickmanrun.jpg

所以帧 1 是 (<0,0><64,64>)，帧 2 是 (<64,0><128,64>) 等。

为了渲染我的图像，我抓取并插入innerHTML以表示我的图像，例如(以伪代码):

var image = document.createElement('image.jpg');
var render = get <div id='RenderSpace'>

render.innerHTML = <div xpos ypos framexy1(e.g 0,0) image>

我的问题是如何指定要“剪辑”的图像区域？

当然，这必须是直截了当的，但我只找到了使用剪辑蒙版的信息，这并不是我真正想要的，我只是想指定一个 RECT，从 Sprite 表中“剪切”图像并然后我想指定一个 RECT 来描述我想将其“粘贴”到屏幕上的位置。

Answer 1

好吧，这是懒惰的...每 250m/s 该函数就会运行一次并递增“animStep”变量...

然后您可以将其与元素的背景位置联系起来......

参见此处的示例(使用 jQuery):http://jsfiddle.net/neuroflux/mjxQW/

var animStep = 0;
var bgX = 0;

function checkAnimStep() {

    //UPDATE THE BACKGROUND-POSITION HERE

    //*********

    switch(animStep) {
        case 0:
            bgX = 64;
            animStep++;
            break;
        case 1:
            bgX = 128;
            animStep = 0;
            break;
        case 2:
            bgX = 128;
            animStep++;
            break;
        case 3:
            bgX = 256;
            animStep++;
            break;
        case 4:
            bgX = 128;
            animStep++;
            break;
        case 5:
            bgX = 64;
            animStep = 0;
            break;
        default:
            break;
    }
}

$(document).ready(function() {
    setInterval(checkAnimStep, 250);
});

​