作为动画PNG精灵的AJAX加载指示器的最佳实践/工具

Question

显然gif不支持alpha通道。如果我想要一个具有alpha通道功能的"throbber"、"spinner"或Ajax加载指示器，那么(ie6之后)唯一的跨浏览器选项似乎就是一个包含throbber所有状态的精灵PNG。

我想我会自己用JavaScript动画来推进帧(使用requestAnimationFrame可用时)通过改变一个类或设置背景原点的东西。

我似乎找不到任何东西来帮助生成这个，特别是。有人知道吗?有什么我应该知道的最佳实践吗?(我知道，例如，指南针有一个精灵助手，我可以利用它来自动化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; }
}