Animated PNG:使用 PNG 格式的动画图片

16,647次阅读
没有评论

共计 1007 个字符,预计需要花费 3 分钟才能阅读完成。

摘要

Animated PNG 可以解决高清动画图片的问题。PNG 动画图片支持 24 位(1600W 色),并且支持 alpha 透明度。另外,GIF 动画每秒最多限制为 10 帧,PNG 动画则无此限制,因此可以得到更为细腻的动画效果。

Animated PNG:使用 PNG 格式的动画图片

1 什么是 Animated PNG

说到动画图片,大家能想到的首先是 GIF。但 GIF 最大的缺点是,图象是基于颜色列表的(存储的数据是该点的颜色对应于颜色列表的索引值),最多只支持 8 位(256 色)。这使得使用 GIF 格式不可能得到高清的动画图片。

Animated PNG 就是 PNG 格式的动画图片。

Animated PNG 可以解决高清动画图片的问题。PNG 动画图片支持 24 位(1600W 色),并且支持 alpha 透明度。另外,GIF 动画每秒最多限制为 10 帧,PNG 动画则无此限制,因此可以得到更为细腻的动画效果。

Animated PNG 很早就在 Firefox 中得到支持,并且在 Safari 8+、chrome 59+ 也得到支持。也就是说,除了微软系浏览器外,最新的主流浏览器都支持 Animated PNG 了。具体的浏览器支持情况请查阅:http://caniuse.com/#feat=apng

Animated PNG:使用 PNG 格式的动画图片

2 制作 Animated PNG 图片

已经有很多工具支持制作 Animated PNG 图片,相信将来也会越来越多。

如果只是想体验一下制作的效果,可以使用这个站点来快速生成: http://animatedpngs.com

首先,你需要准备好每一帧所需要用到的图片。然后,参考下面的步骤操作。

Animated PNG:使用 PNG 格式的动画图片

  1. 打开页面 http://animatedpngs.com
  2. 选择准备好的文件,上传
  3. 上传成功后,调整各配置参数项
  4. 点击 Create Animated Image 按钮,生成
  5. 生成成功后,会给出预览,如果你的浏览器支持 Animated PNG,则可以看到效果了。点击 Download 则可下载

这样,一个简单的 PNG 动画图片就生成了。另外,在支持 webp 格式的浏览器下,还可以选择生成 Animated webp 格式。

Animated PNG:使用 PNG 格式的动画图片

如果你的浏览器支持 Animated PNG,则上面的图片则是和 GIF 一样的动画。

2.1 制作 Animated PNG 的工具与方法参考

3 相关参考

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2017-03-21发表,共计1007字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码