Лучшая практика / инструмент для индикатора загрузки AJAX в виде анимированного PNG-спрайта?

Question

Очевидно, что GIF не поддерживают альфа-канал.Если бы я отключил «throbber», «spinner» или индикатор загрузки Ajax с поддержкой альфа-канала, то, похоже, единственным (после IE6) кросс-браузерным вариантом был бы sprited PNG, содержащий все состояния throbber.

Полагаю, я бы сам анимировал его, используя JavaScript для продвижения кадров (используя requestAnimationFrame, когда он доступен), изменив класс или что-то, что устанавливает происхождение фона.

Кажется, я не могу найтивсе, что помогает генерировать это, в частности.Кто-нибудь знает что-нибудь?Любые лучшие практики, о которых я должен знать?(Я знаю, что, например, у Compass есть помощник по спрайту, которым я могу воспользоваться, по крайней мере, для автоматизации CSS-части.)

Answer 1

Я не думаю, что есть какие-либо "лучшие практики", но есть много инструментов там.Начните с поиска «анимированный GIF для спрайта».Если у вас установлен ImageMagick, взгляните на этот пост:

http://forums.tigsource.com/index.php?topic=9041.msg282280#msg282280

После того, как у вас есть спрайт, все варианты анимации зависят от того, как вы предпочитаете кодировать свой JavaScript.

Какая у вас матрица браузера?Если у вас есть роскошь (FF, Safari, Chrome и т. Д.), Вы можете использовать CSS-анимацию, как показано ниже, где предполагается, что каждый кадр имеет площадь 100px, а ваш спрайт имеет 5 кадров.

#animatedImage {
  width: 100px;
  height: 100px;
  background: transparent url(sprite.png) no-repeat 0 0;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
  animation-name: animateSprite;
}
@-webkit-keyframes animateSprite {
    0%  { background-position: 0 0; }
   20%  { background-position: -400px 0; }
   40%  { background-position: -300px 0; }
   60%  { background-position: -200px 0; }
   80%  { background-position: -100px 0; }
  100%  { background-position: 0 0; }
}