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

Running multiple Javascript png sprite animations simultaneously

本文关键字：png 精灵 动画 Javascript 运行      更新时间：2023-09-26

我被要求创建一个简单的png动画:当鼠标悬停在菜单项上时出现的闪烁，如下所示:http://www.breathoflifeart.com/wordpress/videos/正如您在发布时看到的那样，动画播放得很好，但是当另一个实例启动时，动画就会停止(以中等速度将鼠标扫过菜单项以查看错误)。我正在尝试:

A.即使在另一个元素被高亮显示后，动画仍继续播放
或
B.将背景位置重置为0 onmouseout

下面是当前的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>

您真正需要的是为每个动画使用单独的timerId-s。实际上，这是作用域和闭包的问题。在提供的示例中，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
};

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

相关文章：