同时运行多个Javascript PNG精灵动画

Question

我被要求创建一个简单的png动画：当鼠标悬停在菜单项上时出现的闪光，就像这里看到的一样：http://www.breathoflifeart.com/wordpress/videos/。正如您在发布时所看到的那样，动画播放得很好，但当另一个实例开始时（以适度的速度扫过菜单条目即可看到错误），它会停在原地。我试图做到以下两点之一：

A. 让动画即使在突出显示其他元素后也可以继续播放
或
B. 在mouseout时将背景位置重置为0
以下是当前的javascript代码，修改自另一个问题中找到的示例：

var scrollUp = (function () {
var timerId; // stored timer in case you want to use clearInterval later
return function (height, times, element) {
        clearInterval(timerId);
 var i = 0; // a simple counter
 timerId = setInterval(function () {
   if (i > times) // if the last frame is reached, set counter to zero
   {  i = 0;
        clearInterval(timerId);}
        else
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 50); // every 50 milliseconds
};
})();

HTML（每个元素都遵循相同的基本模板）

<a href="./for-sale/" onmouseover="scrollUp(42, 9, document.getElementById('sp-58'))">
  For Sale
  <div id="sp-58" class="sparkleparty"></div>
</a>

- Kyle

---

你可以告诉我们需要支持哪些浏览器吗？你可以使用CSS3过渡效果。 - chchrist

Answer 1

你所需要做的就是为每个动画使用单独的timerId。 这实际上涉及到作用域和闭包。在提供的示例中，timerId对于所有scrollUp(...)函数来说都是全局的。要解决这个问题，你可以尝试这样做：

var scrollUp = function (height, times, element) {
 var i = 0; // a simple counter
 var timerId = setInterval(function () {
  if (i > times) {
   i = 0; clearInterval(timerId);
  } else {
   element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
  }
  i++;
 }, 50); // every 50 milliseconds
};

- Kimitsu Desu

---

我相信requestAnimationFrame更好。 - chchrist

Answer 2

我为此创建了一个简单的库。看看这个：https://github.com/wolthers/SpriteClip.js

- Michael Wolthers