因为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之. 其实我也不是很懂. 所以说不定会有更加直接的办法呢?