Sublime Text 的作者 Jon Skinner 刚发表了篇文章解释为什么要采取这样的方式，以及如何实现的，地址在 http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html实现方式大意是预先截取一系列 PNG 截屏图片【每张为动画的一帧】，然后将连续两帧之间的细节区别计算出来（这部分是 Python 实现的），融合进一个整合后的 PNG 文件，同时生成一个对应的 JSON 格式元数据记录如何从这张整合后的 PNG 文件里面抽取每帧。最后在网页上读取整合的 PNG 文件和 JSON 元数据，通过 JavaScript 在 Canvas 元素里绘制动画。对于不支持 Canvas 和 Video 标签的老旧浏览器，则用 div 图层叠加的方式模拟动画。之所以要这样做是因为他想这个动画在所有浏览器里面都能播放，因此无法使用 Flash 【iOS 上无法播放】和 Video 标签【IE6 无法播放】。GIF 动画是一个可行的办法，不过 GIF 格式限制只能显示 256 色，画面效果会大打折扣。所以作者就自己实现了这个姑且称为 PNG 动画的解决方案。此法的基本思想即视频增量压缩，对于每帧之间只有细小变化的 screencast 动画来说效率非常高。编码器代码已开源，在 https://github.com/sublimehq/anim_encoder 欢迎大家 fork。作者给出了如下几个改进的建议：让编码器更友好：帮助文档、压缩速度过慢、对于源图片 PNG 格式十分挑剔（比如不支持透明通道等）让 JavaScript 播放器使用 requestAnimationFrame 方法。让编码器运行更快：特别是对于时长较长的动画增量载入：目前在整个动画完全载入之前不会有任何显示，但因为第一帧总是在压缩后的 PNG 文件的头部，可以在等待载入的时候显示第一帧作为占位图。此外，苹果官方网站的 iPhone 5 展示页面也采用了类似的思路，不过是针对 JPG 压缩格式的图片的，而且有简单的用户可操控的动画支持，过程稍微复杂，详见 https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI
【Google Doc 连接，可能需要特殊方式才能访问】}