如何使用javascript从PNG图像显示动画图像? [like gmail]

首先,看看这个图像

Gmail使用此图片显示动画表情符号。
我们如何使用png图像显示这样的动画?

我给你一个粗糙的example,所以你可以得到一个起点:

我将使用一个简单的div元素,具有动画图像将具有的宽度和高度,png精灵作为背景图像和背景重复设置为无重复

CSS需要:

#anim {
  width: 14px; height: 14px;
  background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png);
  background-repeat: no-repeat; 
}

需要标记:

<div id="anim"></div>

诀窍基本上是滚动背景图片精灵,使用background-position CSS属性。

我们需要知道动画图像的高度(知道我们每次将滚动多少)以及滚动多少次(动画有多少帧)。

JavaScript实现:

var scrollUp = (function () {
  var timerId; // stored timer in case you want to use clearInterval later

  return function (height, times, element) {
    var i = 0; // a simple counter
    timerId = setInterval(function () {
      if (i > times) // if the last frame is reached, set counter to zero
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 100); // every 100 milliseconds
  };
})();

// start animation:
scrollUp(14, 42, document.getElementById('anim'))

编辑:您还可以编程方式设置CSS属性,以便您不必在您的页面上定义任何样式,并从上面的例子中,使一个constructor function,将允许您同时显示多个精灵动画:

用法:

var wink = new SpriteAnim({
  width: 14,
  height: 14,
  frames: 42,
  sprite: "http://mail.google.com/mail/im/emotisprites/wink2.png",
  elementId : "anim1"
});

var monkey = new SpriteAnim({
  width: 18,
  height: 14,
  frames: 90,
  sprite: "http://mail.google.com/mail/im/emotisprites/monkey1.png",
  elementId : "anim4"
});

实施:

function SpriteAnim (options) {
  var timerId, i = 0,
      element = document.getElementById(options.elementId);

  element.style.width = options.width + "px";
  element.style.height = options.height + "px";
  element.style.backgroundRepeat = "no-repeat";
  element.style.backgroundImage = "url(" + options.sprite + ")";

  timerId = setInterval(function () {
    if (i >= options.frames) {
      i = 0;
    }
    element.style.backgroundPosition = "0px -" + i * options.height + "px";
     i++;
  }, 100);

  this.stopAnimation = function () {
    clearInterval(timerId);
  };
}

注意,我添加了一个stopAnimation方法,所以你可以稍后停止一个指定的动画只是通过调用它,例如:

monkey.stopAnimation();

检查上面的例子here

http://stackoverflow.com/questions/1736922/how-to-show-animated-image-from-png-image-using-javascript-like-gmail

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:如何使用javascript从PNG图像显示动画图像? [like gmail]