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

Posted 2023-03-06

【中文标题】如何使用javascript从PNG图像显示动画图像？ [ 像 gmail ]

【英文标题】：How to show animated image from PNG image using javascript? [ like gmail ]

【发布时间】：2010-12-16 18:05:10

【问题描述】：

首先，看看这张图片 Gmail 使用此图片来显示动画表情。 我们如何使用 png 图像显示这样的动画？

【参考方案1】：

我给你留下一个粗略的example，这样你就可以得到一个起点：

我将使用一个简单的 div 元素，动画图像将具有 width 和 height，将 png 精灵设置为 background-image 和 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>

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

我们需要知道动画图像的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();

查看上面的例子here。

【讨论】：

+1 对于一个相当简单的问题的最深入的回答之一

很好的答案，很好的实施。作为站点说明：如果您的动画内容变得越来越复杂：spritely.net 似乎是一个不错的小型库，适用于与精灵动画相关的所有内容。

谢谢你，但是我不明白第一个例子中两个匿名函数的用法（为什么是“返回函数”？）。

图片位置已更改，新图片网址ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png

我想补充一点，使用 CSS 中的 steps() 函数，也可以在没有 JS 的情况下使用这种技术来制作简单的动画：blog.teamtreehouse.com/css-sprite-sheet-animations-steps

【参考方案2】：

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

【参考方案3】：

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

【讨论】：

很高兴了解新格式。但我只是想知道如何使用静态 PNG 显示动画。

【参考方案4】：

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

【讨论】：

请告诉我该怎么做。 change the image every x milli

【参考方案5】：

您可以使用 TweenMax 和 stepEase 缓动来做到这一点：http://codepen.io/burnandbass/pen/FfeAa 或 http://codepen.io/burnandbass/pen/qAhpj 无论您选择什么：)

【参考方案6】：

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

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

【讨论】：

我已经想到了，您认为它可能会显示一些故障吗？像第一张图片的一半和第二张图片的一半？