Как показать анимированное изображение с изображения PNG с помощью javascript? [как gmail]

Ответ 1

Я оставляю вам грубый пример, чтобы вы могли получить начальную точку:

Я буду использовать простой элемент div, с width и height, который будет иметь анимированное изображение, png спрайт как background-image и background-repeat установлен на no-repeat

Необходимый CSS:

#anim {
  width: 14px; height: 14px;
  background-image: url(http://mail.google.com/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, поэтому вам не нужно определять какой-либо стиль на вашей странице и создавать конструктор из приведенного выше примера, который позволит вам одновременно отображать несколько анимаций спрайтов:

Применение:

var wink = new SpriteAnim({
  width: 14,
  height: 14,
  frames: 42,
  sprite: "http://mail.google.com/mail/im/emotisprites/wink2.png",
  elementId : "anim1"
});

var monkey = new SpriteAnim({
  width: 18,
  height: 14,
  frames: 90,
  sprite: "http://mail.google.com/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();

Проверьте приведенный выше пример здесь.

Ответ 2

Взгляните на это:
http://www.otanistudio.com/swt/sprite_explosions/ и http://www.alistapart.com/articles/sprites Ответ лежит внутри.

Ответ 3

Ответ на CMS прекрасен, но также есть APNG (анимированный PNG) формат, который вы можете использовать вместо этого. Конечно, первый кадр (тот, который отображается даже браузерами, которые не поддерживают APNG) должен быть "окончательным" фреймом и просто указать, чтобы пропустить первый кадр в файле.

Ответ 4

Установите фоновое изображение элемента на первое изображение, а затем используйте javascript для изменения изображения, изменив стиль каждые x миллисекунд.

Ответ 5

Вы можете сделать это с помощью TweenMax и steppedEase: 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*/
}