如何使用JavaScript从PNG图像显示动画图像？[类似于Gmail]

Question

如何使用JavaScript从PNG图像显示动画图像？[类似于Gmail]

javascriptimageanimationpng

29

首先，查看这张图片
wink
Gmail使用此图像显示动画表情符号。
如何使用png图像显示此类动画呢？

- Rakesh Juyal

6个回答

3

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

- roufamatic

3

CMS的回答很好，但你也可以考虑使用APNG（动态PNG）格式。当然，第一帧（即使是不支持APNG的浏览器也会显示的帧）应该是“结束”帧，并且只需指定跳过文件中的第一帧。

- Eli Grey

1

了解新格式很好。但我只想知道如何使用静态PNG显示动画。 - Rakesh Juyal

1

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

- klaaspieter

2

请告诉我如何做到这一点。每x毫秒更改图像 - Rakesh Juyal

0

你可以使用TweenMax和steppedEase缓动来实现：http://codepen.io/burnandbass/pen/FfeAa 或者 http://codepen.io/burnandbass/pen/qAhpj，无论你选择哪个 :)

- Chris Panayotoff

0

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

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

- Undefitied

我已经考虑过了，你认为它可能会出现一些故障吗？比如第一张图片的一半和第二张图片的一半？ - shunz19

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian C. Salvadó · Accepted Answer

我为您留下一个简单的示例，以便您有一个起点:

我将使用一个简单的 div 元素，它的 width 和 height 与动画图像相同，作为背景图片使用 png 雪碧图，并将 background-repeat 设置为 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>

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

我们需要知道动画图片的height（以确定每次向上滚动多少）和要滚动的次数（动画将有多少帧）。

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: "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方法，这样你可以通过调用它来停止指定的动画，例如：

monkey.stopAnimation();

请查看上面的例子这里。