HTML5/CSS3を使用してイメージアニメーションを古風な方法で実行する（つまり、スプライトアニメーションを意味します）

Question

アニメーションを実行するためにスプライトシートを使用しようとしています。私はキャンバスを捨てて、画像を画面に表示するHTML5/CSS3のルートをダウンしましたが、始めても前に潜在的な障害に遭遇しました。

は、ここでサンプルスプライトシート（恐ろしいプログラマ-芸術を言い訳）です：

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を指定したいと思っています。

Answer 1

[OK]を、これは怠惰である...すべて250メートル/ sの機能は、「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); 
}); 

Answer 2

HTML/CSSで画像をクリップする一つの方法を、それがバックとして設定しますdivのグラウンド、divのサイズと背景の位置などを指定します。 HTMLで

：

CSSで

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

：

#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"); 
}