因为GIF不支持半透明, 在使用时, 如果背景固定还好说, 如果背景是变化的, 那么透明的GIF图片边缘会有很明显的粗糙锯齿.

最近做JS游戏, 因为只针对设备开发的, iPhone和iPod里的Mobile Safari支持部分CSS3, 所以就想出了这个解决办法. 虽然比较小众, 但是对于我来说, 还是有价值的.

当然, 因为PNG图一般都偏大, 所以这个方案不适用于帧数很多的动画.

思路是很简单的, 通过改变背景的位置(背景定位)来实现.

首先我们需要把动画中出现的每一帧连成一个长条, 就像电影一样, 然后通过CSS3, 使它们逐帧显示出来. 例子如下(以Webkit为例).

@-webkit-keyframes 'somename' {
    0% { background-position: 0px; }
    49.9999% { background-position: 0px; }
    50% { background-position: -100px; }
    100% { background-position: -100px; }
}

#someid {
    background-image: url(somepic.png);
    -webkit-animation-name: somename;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: infinite;
}

属性的意思我就不解释了, 英文, 很明了的. 因为CSS3动画本身貌似不是为逐帧的动画而生, 所以, 请注意49.9999%和50%这个百分比, 因为相隔很近, 可以让背景一次性从一个位置, 跳动到另一个位置, 这样以来, 就模拟了帧的变化.

如果想了解更多的CSS3动画技术, 请Google之. 其实我也不是很懂. 所以说不定会有更加直接的办法呢?

Original link of this archive: http://www.vilic.info/blog/archives/458
本文的原始链接: http://www.vilic.info/blog/archives/458