Javascript 我需要一些代码来设置我的精灵的动画

我尝试了很多不同的方法，但似乎都不管用，所以我希望这里有人有一些空闲时间，想帮忙。我正在尝试为一个精灵条带的动画创建javascript，该条带有11个垂直堆叠的图像，每个帧为640 x 889。我希望动画在窗口打开时开始，在帧之间来回运行3次，然后停止。共有11帧，序列应该是1…11，然后是11…1，三次，总共需要3秒钟来完成三个循环。提前谢谢你的帮助

HTML:

---

您的问题是没有定义requestAnimationFrame。并不是所有浏览器都能实现它

我找到了一个垫片

并更新了您的

---

现在它确实起了作用，但我不认为这正是你想要的

扩展Matt的答案：

首先，需要“遮罩”动画，以便一次只能看到一帧。为此，只需将容器的宽度和高度设置为一个框架的大小：

#bmw-glow {
  width: 104px;
  height: 144.45px; /* Fractional pixels are not good. */
  margin: 0px;
  background: url("http://i45.tinypic.com/4qj0b5.jpg") no-repeat;
}

其次，我修改了使当前帧成为绝对正弦波的代码。这给了我们一点放松，这可能不是所有情况下都需要的，但我认为对这种情况来说是好的

var freq     = 1,  //frequency of the animation. Roughly how many times per second it should loop. Higher number is faster, lower number is slower.
currentFrame = 0,
totalFrames  = 11,
deltaFrame   = 1,
frameStep    = 1589 / totalFrames,
elem         = document.getElementById("bmw-glow"),
currentTime  = new Date().getTime();

(function animloop(time){
  var delta = (time - currentTime) / 1000;

  currentFrame += (delta);

  var frameNum = Math.floor(Math.abs(Math.sin(currentFrame*freq) * totalFrames));

  requestAnimFrame(animloop);

  elem.style.backgroundPosition = "0 -" + (frameNum * frameStep) + "px";

  currentTime = time;
})(currentTime);

---

显然，在这个例子中，有一些抖动，因为我们正在处理分数像素。我相信您上传到tinypic的图像已缩小，这就是为什么会发生这种情况。

什么不起作用？症状是什么？在文章中添加一个JSFIDLE链接。它似乎只是显示第一帧，没有任何动画效果。当正常工作时，宝马应该有一个黄色的发光体围绕着它。你检查控制台了吗？有什么错误吗？@Eric_S:你有没有不受密码保护的图像？因为我在你的小提琴上看不到它的本来面目。@shmiddy啊，还是新的，忘了那一步，下面是我得到的错误[14:15:34.370]ReferenceError:requestAnimationFrame没有定义@nah它没有，宝马周围的框架有上升的光晕度，我想给它设置动画，使它看起来像流动的光晕。谢谢你的帮助，非常感谢。事实上，我最终解决了我的问题，创建了两个图像，一个用于背景，一个用于发光，我使用jQuery的.fadeToggle来设置淡入效果的动画。我应该如何跳转到第一步而不是向后播放？

    // shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

#bmw-glow {
  width: 104px;
  height: 144.45px; /* Fractional pixels are not good. */
  margin: 0px;
  background: url("http://i45.tinypic.com/4qj0b5.jpg") no-repeat;
}

var freq     = 1,  //frequency of the animation. Roughly how many times per second it should loop. Higher number is faster, lower number is slower.
currentFrame = 0,
totalFrames  = 11,
deltaFrame   = 1,
frameStep    = 1589 / totalFrames,
elem         = document.getElementById("bmw-glow"),
currentTime  = new Date().getTime();

(function animloop(time){
  var delta = (time - currentTime) / 1000;

  currentFrame += (delta);

  var frameNum = Math.floor(Math.abs(Math.sin(currentFrame*freq) * totalFrames));

  requestAnimFrame(animloop);

  elem.style.backgroundPosition = "0 -" + (frameNum * frameStep) + "px";

  currentTime = time;
})(currentTime);