javascript - CSS spritesheet 动画协助

Question

我有一个 Sprite 表，宽度为 5760 像素，高度为 5400 像素，包含 10 行和 6 列，每列宽度为 960 像素，高度为 540 像素。 Sprite 表中的所有 Sprite 都是从左到右、从上到下排列的。我想使用 CSS 将 60 个图像作为动画播放，但我无法理解需要什么代码。有人有什么建议吗？

Answer 1

最简单的解决方案是将背景位置更改按顺序与 css 类关联。

即。

.class1{background-position:0,0} // top left
.class2{background-position:-960px, 0} // indent by 960
// go to .class6 minus 960 to first px value
.class7{background-position:0,540px} // got to left of 2nd row 
.class8{background-position:-960px,-540px} // got to left of 2nd row
// keep going for 10 rows, minus 540 per row and 960 per col 

然后在 javascript 中(使用 jQuery)

var viewarea = documentGetElementByID('my_window'); // id of DIV
var counter = 0; 
var speed = 300; // miliseconds between frame change

function loopAnimation(){
  // remove old frame
  if($(viewarea).hasClass("class"+counter){
     $(viewarea).removeClass("class"+counter);
  {
  // change counter
  if(counter == 60 ){
     counter = ;
  }else {
  counter++;
  }   
  // move to next frame
  $(viewarea).addClass("class"+counter);
  // set animation to do another frame
  var t = setTimeout(function(){loopAnimation();}, speed);
}
// begin animation
loopAnimation();