使用APNG替代GIF格式的动态图片
in 前端 with 0 comment

使用APNG替代GIF格式的动态图片

in 前端 with 0 comment

在制作阿里云DataV数据大屏时,因为dataV素材库中一部分动效与我们大屏的主色调不一致,所以UI额外制作了一些gif特效图片。

当GIF使用了渐变效果后,导出的图片渐变部分会被替换成黑色

1.png

但阿里云素材库里的一些动效却没有这个问题,下载了一个素材文件后发现它是png格式的。

png格式的动图只有APNG格式,这里我们选用APNG Anime Maker来制作APNG图片

2-1-16376322575705.png

2-2.png

APNG的优点就是更好的透明度和渐变效果支持,同时在相同尺寸中,相比GIF文件体积也缩小了38%(GIF原图2.88MB,APNG图片1.78MB)

效果如下,渐变效果就不会出现黑边了

2.png

附:PS导出PNG序列帧的方法

  1. 文件 - 导出 - 渲染视频:

v2-371d95ad21916d03fe067b01b126a364_720w.jpg

  1. 选择Photoshop图像序列

v2-9a0fc3faff8902036d7fc8ad8f18d68a_720w-16376315895752-16376315919164.jpg

  1. Alpha通道选择直接—无杂边,就可以导出透明背景的PNG序列了
Comments are closed.