JavaScript+PNG模拟GIF动画

Google节日涂鸦经常可以看到一些小动画,这可不是GIF动画,其实稍微分析下代码就不难看出是用JavaScript+PNG实现的。

JavaScript+PNG相对GIF动画的优势:

  • JS控制动画的播放和停止等,GIF动画则不行。
  • PNG图片色彩度高,压缩质量要好于GIF。PNG图片大小会小于GIF。
  • PNG可实现半透明效果,而且不会出现毛边。适用性广。

代码:

var i = 0,
pic = document.getElementById("pic"),
ani = function () {
            i != -2784 ? i -= 32 : i = 0; //2784是最后一帧图片距离整个图片顶部的距离,32是动画单帧时的场景大小加上单帧之间的间隔
            pic .style.backgroundPosition = "0 " + i + "px";
}
 window.setInterval(ani, 100);

示例:

发表评论

电子邮件地址不会被公开。 必填项已用*标注