如何使用javascript从PNG图像显示动画形象？ [如Gmail] [英] How to show animated image from PNG image using javascript? [ like gmail ]

问题描述

首先，看看这个图片结果
结果
Gmail使用此图片显示的动画表情。结果
我们如何使用显示PNG图像等动画？

First of all,check out this image

Gmail uses this image to display the animated emoticon.
How can we show such animation using a png image?

推荐答案

我离开你一个粗略的​​例如，以便你可以得到一个起点

I leave you a rough example so you can get an starting point:

我将使用一个简单的div元素，与宽度和高度，该动画形象都会有，在PNG精灵为背景图片和背景重复设置为不重复

I will use a simple div element, with the width and height that the animated image will have, the png sprite as background-image and background-repeat set to no-repeat

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>

诀窍基本上是滚动的背景图像精灵了，使用背景位置 CSS属性。

我们需要知道高度动画图像的（要知道我们多少每次滚动）多少次滚动（多少的帧的将有动画）。

We need to know the height of the animated image (to know how much we will scroll up each time) and how many times to scroll (how many frames will have the animation).

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属性编程，所以你不必定义你的页面上的任何风格，并做好<一个href=\"https://developer.mozilla.org/En/Core%5FJavaScript%5F1.5%5FGuide/Creating%5FNew%5FObjects/Using%5Fa%5FConstructor%5FFunction\">constructor从上面的例子功能，这将让您同时显示多个精灵动画：

You can also set the CSS properties programmatically so you don't have to define any style on your page, and make a constructor function from the above example, that will allow you to show multiple sprite animations simultaneously:

用法：

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 方法，这样以后可以停止一个特定的动画只是调用它，注意事项，例如：

Notice that I added a stopAnimation method, so you can later stop a an specified animation just by calling it, for example:

monkey.stopAnimation();

这里检查上面的例子。

Check the above example here.

这篇关于如何使用javascript从PNG图像显示动画形象？ [如Gmail]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！