我需要一些代码来动画我的精灵答案

【问题标题】：I need some code to animate my sprite我需要一些代码来动画我的精灵
【发布时间】：2012-10-23 12:41:12
【问题描述】：

我尝试了很多不同的方法，但似乎没有任何效果，所以我希望这里有人有空闲时间并想提供帮助。我正在尝试为精灵条的动画创建 javascript，该动画具有 11 个垂直堆叠的图像，每帧为 640 x 889。我希望动画在窗口打开时开始并在帧中来回运行 3 次然后停止.有 11 帧，序列应该是 1....11 然后 11...1，3 次，总共需要 3 秒来完成三个循环。在此先感谢您的帮助。

HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.8.2.js"></script>
    <meta name ="viewport" content = "width=640, user-scalable=yes">
    <link rel="stylesheet" href="animate.css"/>
    <title>Website</title>
</head>
<body>
    <div id="bmw-glow">
    <script type="text/javascript">
    var fps          = 11,
    currentFrame = 0,
    totalFrames  = 11,
    elem         = document.getElementById("bmw-glow"),
    currentTime  = new Date().getTime();

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

  currentFrame += (delta * fps);

  var frameNum = Math.floor(currentFrame);

  if (frameNum >= totalFrames) {
    currentFrame = frameNum = 0;
  }

  requestAnimationFrame(animloop);

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

  currentTime = time;
})(currentTime);
</script>
</div>
</body>
</html>

CSS：

#bmw-glow {
  width: 640px;
  height: 889px;
  margin: 0px;
  background: url("images/Social/Social_6_S.jpg");
}

【问题讨论】：

什么不起作用？有什么症状？在帖子中添加一个 jsfiddle 链接。
它似乎只是显示第一帧并且没有任何动画。正常工作时，宝马周围应该有黄色的光芒。 jsfiddle.net/xtQDn/1
你检查过控制台吗？遇到任何错误？
@Eric_S：你有没有没有密码保护的图片？因为我在你的小提琴上看不到它。
@Shmiddty 啊，还是新的，忘记了那一步，这是我得到的错误 [14:15:34.370] ReferenceError: requestAnimationFrame is not defined @fiddle.jshell.net/_display/:44

标签： javascript animation sprite

【解决方案1】：

扩展马特的回答：http://jsfiddle.net/Shmiddty/xtQDn/5/

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

#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 的图片已按比例缩小，这就是发生这种情况的原因。

【讨论】：

谢谢，非常感谢。实际上，我最终通过创建两张图像来解决我的问题，一张用于背景，一张用于发光，我使用 jQuery 的 .fadeToggle 为淡入淡出效果设置动画。
我应该怎么做才能跳到第一步而不是向后播放？

【解决方案2】：

你的问题是 requestAnimationFrame 没有定义。并非所有浏览器都实现。

我找到了一个垫片here

    // 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);
          };
})();

并更新了您的fiddle

现在它做了一些事情，但我不认为这正是你的想法！

【讨论】：

不，它没有，框架在 bmw 周围的发光度数不断增加，我想对其进行动画处理，使其看起来像流动的光晕时断时续。不过感谢您的帮助。