Question

显然，GIF不支持Alpha通道。如果我减少了支持alpha通道的“悸动者”，“微调器”或Ajax加载指示器，那么似乎唯一的（IE6后）跨浏览器选项将是包含悸动者所有状态的sprited PNG。

我想我会通过更改类或设置背景原点的类来自行使用JavaScript来推进帧（使用requestAnimationFrame时可用）。

我似乎找不到任何有助于产生这一点的东西，特别是。有谁知道吗？我应该知道的任何最佳实践？（我知道，例如Compass有一个sprite助手，我可以利用它来自动化CSS部分，至少。）

Answer 1

我认为没有任何＆＃34;最佳做法＆＃34;但是有很多工具可供选择。首先搜索＆＃34;动画gif到精灵＆＃34;。如果你安装了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; }
}

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

1 个答案: