如何使用javascript显示PNG图像的动画图像？ [比如gmail]

Question

首先，查看此图像

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

Answer 1

我给你留下了粗略的example，所以你可以得到一个起点：

我将使用一个简单的div元素，其中动画图片将包含width和height，png精灵为background-image，background-repeat设为{{ 1}}

需要CSS：

no-repeat

需要加价：

#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> CSS属性滚动背景图像精灵。

我们需要知道动画图像的background-position（知道我们每次会向上滚动多少）以及滚动多少次（有多少帧会有动画）。

JavaScript实施：

height

编辑：您还可以通过编程方式设置CSS属性，这样您就不必在页面上定义任何样式，并从上面的示例中创建constructor function，这将允许你可以同时显示多个精灵动画：

<强>用法：

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'))

<强>实施

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

检查上面的示例here。

Answer 2

看看这个：
http://www.otanistudio.com/swt/sprite_explosions/ 和http://www.alistapart.com/articles/sprites 答案就在于。

Answer 3

CMS的答案很好，但您也可以使用APNG（动画PNG）格式。当然第一帧（即使是不支持APNG的浏览器也显示的那一帧）应该是“结束”帧，只是指定跳过文件中的第一帧。

Answer 4

将元素的背景图像设置为第一个图像，然后使用javascript通过每隔x毫秒更改样式来更改图像。

Answer 5

你可以使用TweenMax和stepsEase缓动：http://codepen.io/burnandbass/pen/FfeAa或http://codepen.io/burnandbass/pen/qAhpj无论你选择什么:)

Answer 6

在这种情况下可以使用CSS @keyframe

@keyframes smile {
    0% { background-postiion: 0 -16px;}
    5% { background-postiion: 0 -32px;}
    10% { background-postiion: 0 -48px;}
    /*...etc*/
}