MENU

逐帧图新的解决方式

March 9, 2021 • Read: 941 • 教程

逐帧图新的解决方式

在前端开发中常常会使用到逐帧图,常用的逐帧图处理方式有雪碧图、Gif、animation

在最近的一个项目中,客户想要一个礼花的效果,给了一个gif大小750*1500,58张图片,
尝试用雪碧图,结果太大,pass,于是采用层叠58张图片用animation控制显示隐藏达到逐帧的效果,测试在旧设备上逐帧太卡,不完美。

APNG的特性简介

APNG是种类似GIF的动态图片, 开发中使用GIF展现包 含透明背景的动态效果往往很糟糕 ,比如图像边缘的白边、 锯齿、色彩失真。
用APNG代替GIF可以完美解决上述问题。APNG的文件后缀为”xx.png”通过专用软件可以将PNG序列帧文件制作成APNG动态图片。

I0S8之后全面支持了APNG,目前iOS12信 息iMessage中的各种动态表情使用的即是APNG图,可以在Safari浏览器中打开播放。Android原生并不支持APNG图,可以使用第三方框架便捷实现。Chrome、 火狐、Safari 等主流浏览器均已支持APNG。不用担心兼容问题。

GIF虽然支持透明,但他只支持将某个颜色标记成透明,也就是不支持半透明。只支持完全透明或者完全不透明。如果把一一个 边缘是半透明的
图片转换成GIF,就会出现令人难以接受的白边、锯齿问题。而APNG由多张PNG图片组成,完全能够胜任半透明图像,透明度可以有256级。

GIF是一个非常古老的格式,1987 年诞生,最后一个版本是1989年,已经29年没有更新过技术。APNG诞生于2004年,十几年的科技进步不容小觑。由于技术硬伤,GIF最 多只能显示256种颜色。随着移动应用微动效的普及,透明动态图用得越来越频繁,色彩失真的GIF显然无法
满足产品的严苛需求。APNG完美支持1600多万种颜色。

APNG兼容

推荐一个网站前端必备 Can i use

-w1369

apng虽已经出现很久,但是部分浏览器仍未支持(未测试),经测试测试下小程序完美支持。

制作APNG

1.制作素材
2.使用AE导出apng序列
3.合成APNG(软件iSparta 已在Github开源)

素材导入AE做好动效,AE -> 文件 -> 导出 -> 添加到渲染列队

添加到渲染列队 -> 输出模块

  • 格式选择PNG序列
  • 通道设置为RGB + Alpha
  • 使用合成帧编号

-w579

-w578

渲染成功后 如下图

-w950

渲染成功后的文件全部拖入 iSparta 根据需求设置输出参数,稍等片刻

-w820

看一下成品
因为博客主题会自动对图片链接处理 所以 点击查看效果

Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 1 条评论
  1. rtw rtw

    逐帧图新的解决方式