数据可视化大屏 项目开发中,为了让大屏页面看起来更酷炫会在大屏中添加序列帧动画用来装饰大屏,但是很多图片放在一块渲染或者管理可能不是很方便,我们可以通过iSparta来对图片进行转换,转为apng动画图片。
apng介绍
APNG(动画便携式网络图形格式)是 PNG(便携式网络图形)格式的一个非官方扩展,它允许在单个文件中存储动画图像。APNG 在保持与标准 PNG 格式的兼容性的同时,提供了对动画的支持。这意味着 APNG 文件在不支持动画播放的地方表现为一个普通的 PNG 图像。
主要特点
-
高质量图像:APNG 支持 24 位颜色和 8 位透明度,不像 GIF 那样只支持 256 种颜色,这使得 APNG 在颜色和图像质量上优于 GIF。
-
向后兼容性:APNG 文件可以作为标准的 PNG 文件显示,这意味着即使在不支持 APNG 的浏览器或查看器中,文件也可以作为静态图像显示。
-
文件大小:由于其颜色和透明度的支持,APNG 文件通常比 GIF 文件大,但与其提供的质量相比,这通常是可接受的。
-
支持透明度:APNG 支持完全透明度和半透明度,这对于创建具有平滑边缘和透明背景的动画特别有用。
使用场景
- 网页设计:用于网页上需要高质量动画的地方,特别是当透明度是一个重要因素时。
- 移动应用:在需要保留图像质量同时显示动画的移动应用中,尤其是在用户界面元素中。
- 广告:在线广告中使用,以吸引用户注意力,同时保持图像质量。
- 教育和演示:在教育材料或演示中,展示复杂的动画或流程。
兼容性
虽然 APNG 的支持并不像 GIF 那样广泛,但许多主流浏览器(如 Firefox、Safari 和一些版本的 Chrome)和图像查看器支持这种格式。一些图像处理软件也能创建和编辑 APNG 文件。
iSparta介绍
PNGs转换APNG
将多张PNG合并成一个APNG动图,可以设置帧频率、循环次数等参数。要求PNG在同一目录下,并且保持文件名标准化(1.png, 2.png...)
PNGs单独设置帧频
可以给每一帧单独设置帧频,以满足个性化诉求
PNG、GIF转换WebP
将PNG、GIF转换为WebP格式,可以设置无损,压缩比等参数。
APNG转换Animated WebP
将APNG动图转换为Animated WebP动图,可以设置循环次数,无损等参数。
PNG和GIF无损压缩
将PNG和GIF进行无损压缩,减少图片大小。
工具搭配图压使用
虽然iSparta提供转apng图片压缩,但在实际应用的时候却发现,图片压缩后的apng动画很糊,所以我们可以搭配图片批量压缩工具-图压一块使用,先使用图压压缩图片,然后再使用iSparta转apng图片。