web-dev-qa-db-ja.com

JavaScriptを使用してPNG画像からアニメーション画像を表示する方法は？ [Gmailのように]

まず、この画像をチェックしてください
wink
Gmailはこの画像を使用して、アニメーションの絵文字を表示します。
PNG画像を使用してこのようなアニメーションをどのように表示できますか？

javascriptimageanimationpng
26
Rakesh Juyal

大まかな 例 を残すので、開始点を取得できます。

シンプルなdiv要素を使用します。アニメーション画像が持つwidthおよびheightを使用し、background-imageおよびbackground-repeatとしてpngスプライトを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'))

EDIT：また、プログラムでCSSプロパティを設定して、ページにスタイルを定義して コンストラクタを作成する必要がないようにすることもできます。 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 を確認してください。

69
CMS

CMSの答えは問題ありませんが、代わりに使用したい [〜＃〜] apng [〜＃〜] （アニメーションPNG）形式もあります。もちろん、最初のフレーム（APNGをサポートしないブラウザーでも表示されるフレーム）は「終了」フレームで、ファイルの最初のフレームをスキップするように指定するだけです。

3
Eli Grey

これをみて：
http://www.otanistudio.com/swt/Sprite_explosions/ および http://www.alistapart.com/articles/sprites 答えはあります以内に。

3
roufamatic

要素の背景画像を最初の画像に設定し、JavaScriptを使用して、xミリ秒ごとにスタイルを変更して画像を変更します。

1
klaaspieter

この場合、CSS @keyframesを使用できます

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

TweenMaxとsteppedEaseイージングでそれを行うことができます： http://codepen.io/burnandbass/pen/FfeAa または http://codepen.io/burnandbass/pen/qAhpj =選択したもの:)

0
Христо Панайотов