技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 其他 --> 关于动态gif的帧速

关于动态gif的帧速

浏览:1751次  出处信息

    做了一个小实验,结果预期的目的失败了,倒是额外发现了关于动态gif帧速的一个链接:http://humpy77.deviantart.com/journal/12374968/

    如果没耐心读英文,我中文介绍一下:

    动态GIF的定义,是弄一组GIF图片,然后指定渲染图片序列的时候,处理下一帧之前 delay 多长时间。这个时间是一个整数n,表示延时 n * 1/100 秒。

    理论上我们可以得到非常棒的动画图像,要知道电影也不过每秒24帧而已,但我们从来没有看到过效果很好的动态gif,不是么?

    原因在浏览器对这个规范的实现上。所有的浏览器,都不支持 n=0,1的延迟,而且如果把值设成0或1,会得到更糟糕的动画效果!

  1. IE,所有n<6的延迟,统统提高到10 (0.1秒 or 10fps)
  2. Firefox,所有n<2的延迟,统统提高到 10。就是说 n=2 确实可以在firefox上看到很漂亮的动画,可惜IE上会慢得一塌糊涂
  3. Opera,最糟糕,最小是0.1秒
  4. Safari,和Firefox各有利弊,所有n<3的延迟,会提高到3。换句话说你不小心做了一个n=1的图,在其它浏览器下都悲剧了,但在Safari上还凑合
  5. 最后,上面都是2007年的测试,我自己又重新用各个浏览器最新的版本重新测了一下,看n=2以及n=6动画的表现:
    • 对IE 8/Firefox3.6来说,上面表现一样
    • 新版的Opera表现很好,n=2的时候,效果和Firefox一致,赞!没有测是否支持n=1
    • 新版Safari,至少是Windows上的Safari 4吧,比老版本退步了。n小于某个值的时候,会提高到一个更高的值(应该是10)。在我测试里n=6的图片,效果比n=2要好;但不知道现在它支持的最小值是多少,也许仍然是3?n<3的时候n=10?
    • Chrome表现和Safari一样。我猜所有webkit浏览器,应该都一样的

    等下周有时间了生成n=1,2,3,4,5,6,10, 再全面测试看看

    结论,千万不要用 0/1 来指定 n,这就彻底茶几了;用2/3/4/5?在Firefox和Opera下效果会如你预期;但为了兼容所有浏览器,还是用6吧

建议继续学习:

  1. web开发中合理动用图片格式    (阅读:2770)
  2. 完美实现GIF动画缩略图    (阅读:2622)
  3. 小tips: CSS或JS实现gif动态图片的停止与播放    (阅读:1349)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1