如何使用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?

推荐答案

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

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

我将使用一个简单的 div 元素，带有动画图像将具有的 width 和 height，png 精灵为 background-image 和 background-repeat 设置为 no-repeat

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(https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png);
  background-repeat: no-repeat; 
}

需要标记:

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

技巧基本上是使用 background-position CSS 属性向上滚动背景图像精灵.

The trick is basically to scroll the background image sprite up, using the background-position CSS property.

我们需要知道动画图像的height(知道我们每次向上滚动多少)和滚动多少次(多少帧将有动画).

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 属性，这样您就不必在页面上定义任何样式，并创建一个 构造函数 来自上面的例子，这将允许您同时显示多个精灵动画:

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: "https://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png",
  elementId : "anim1"
});

var monkey = new SpriteAnim({
  width: 18,
  height: 14,
  frames: 90,
  sprite: "https://ssl.gstatic.com/ui/v1/icons/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 specified animation just by calling it, for example:

monkey.stopAnimation();

在这里检查上面的例子.

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