Использование HTML5 / CSS3 для анимации изображения старомодным способом (это означает, что анимация Sprite!)

Question

Итак, я пытаюсь использовать спрайт-лист для анимации.Я отверг холст и пошел по пути отображения изображений на экран в HTML5 / CSS3, но натолкнулся на потенциальный камень преткновения еще до его начала.

Вот пример листа спрайта (извините за ужасное искусство программиста):

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

Таким образом, кадр 1 (<0,0> <64,64>), кадр 2 (<64,0> <128,64>) и т. Д.

Для рендеринга своих изображений я беру a, а затем вставляю 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, который «вырезает» изображение излист спрайта, и затем я хочу указать RECT, который описывает, куда я хочу «вставить» его на экран.

Answer 1

Хорошо, это лениво ... Каждые 250 м / с функция будет запускаться и увеличивать переменную "animStep" ...

Затем вы можете связать это с background-position вашего элемента ...

Смотрите здесь, например (с использованием 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);
});

1010 *

Answer 2

Один из способов обрезать изображение в HTML / CSS - установить его в качестве фона для div, указав размер div и положение фона, что-то вроде этого.

В HTML:

<div id="frame">&nbsp;</div>

В CSS:

#id {
    width: 64px;
    height: 64px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-image: url(/image.jpg);
}

А затем в javascript, чтобы установить конкретный кадр:

function setFrame(idx) {
    var posx = -64 * idx;
    document.getElementById('frame').style.backgroundPosition = (posx + "px 0px");
}