APNG代替GIF解决杂边、锯齿、颜色失真等问题,输出动态效果。
在制作简单动效GIF图是总会有失真的问题,设计师很头疼,下面讲一下怎么解决这个问题
APNG的应用场景
举个栗子一个常见的动效需求:保护半透明的动态图,例如loading加载,使用场景在app内,动图要叠加在内容上。下面叠加的额内容不确定,这就要求动图必须支持半透明图层。如下图图书翻页会有阴影,而且是个半透明渐变的投影
APNG制作步骤
做好的透明背景,在AE做好动效
AE-文件-导出-添加到渲染对列----格式改为“PNG”序列------通道RGB+Alpha
AE渲染好的PNG序列图会按照顺序编号会自动放在文件夹
打开imparta将文件拖入输出APNG格式,设置好导出路径点开始运行就成
压缩率
GIF 采用的是 LZW,而 APNG 采用的是 Deflate,再加上 APNG 继承了 PNG 的 filter,利用相邻像素的相似性使压缩率大大提高
原 GIF 文件大小为 1.2 MB,但是一般的 GIF encoder 都不会拼命的去优化文件大小。
如果让 gifsicle 利用各种奇淫技巧进行优化,可以将文件无损的压缩到 978 KB
gifsicle -O3 Rotating_earth_(large).gif -o Rotating_earth_(large)_gifsicle.gif
而随随便便转换一个 APNG 才 479 KB 而已
gif2apng Rotating_earth_(large).gif
如果不在乎压缩时间的话,使用奇淫技巧(zopfli)来压缩 APNG,还可进一步压缩到 811 KB
兼容性
几乎所有的浏览器都支持 GIF,而支持 APNG 的浏览器只有 Firefox 和 Safari,?Chrome 58 开始也会支持 APNG,目前支持 WebP 的只有 Chrome 和 Opera,?Firefox 也即将支持 WebP,?Safari 也在测试 WebP 的支持。至于 IE 和 EDGE 嘛,呵呵,还是换浏览器吧
下载地址
链接: https://pan.baidu.com/s/1wR6h4jqazRrn_WCm7DJUeQ 密码: fubi