PNG 动画及用法说明

码小哥

载入中...

没错,APNG (Animated PNG)格式的动图,色彩更丰富,没有毛边和色斑,透明效果更真实! 随着苹果从 IOS 8 ,google 从 chrome 59版本开始正式支持,Line、iMessage 等软件广泛采用, APNG 格式将逐渐取代 GIF,成为动图的首选。 如今,你也可以在晒网创作中采用 APNG 格式动图,给你的作品增光添彩。

GIF
APNG

没错,APNG (Animated PNG)格式的动图,色彩更丰富,没有毛边和色斑,透明效果更真实!


随着苹果从 IOS 8 ,google 从 chrome 59版本开始正式支持,Line、iMessage 等软件广泛采用, APNG 格式将逐渐取代 GIF,成为动图的首选。


如今,你也可以在晒网创作中采用 APNG 格式动图,给你的作品增光添彩。

这两个跳动的小球,有什么不同?
你可以控制 APNG 动图!

试试看,点击上面的按钮,控制动图的播放。


忘掉那些不受控制,无限循环的 GIF 动图吧,让动画效果和你的作品完美结合,给读者深刻印象。

将动图与 H5 动画结合起来

这个走过页面的小朋友,行走动作是一个 APNG 动图,结合构件移动动画,做出走过页面视觉效果。


你可以在晒网编辑环境中打开这个示例作品,在小朋友构件的“行为”选项卡中,查看详细的做法。


APNG 动图毕竟是图片动画,文件尺寸通常会比较大,无节制的使用会浪费你读者的手机流量,降低他们的阅读体验。


通常建议将H5 动画和 APNG 动图结合起来使用,以兼顾高画质和高效率的动画需求。

使用 APNG 很简单

不需要特别的设置,你只要在作品中添加图片的时候,选择一张合适的 APNG 图片即可使用。


晒网会自动识别出 APNG 格式动图,你可以像一个普通图片构件一样对它进行排版、样式设置及添加各种行为。


如果你需要对动图进行复杂的控制,可在控制动图的构件中,添加一个“构件交互”动作,然后选好要交互的目标构件,添加相应交互行为即可。

制作 APNG 动图常用工具
将 PNG 序列文件打包为 APNG

多数动画软件(如新版Flash),可以将动画导出为 PNG 序列文件。利用以下免费工具,可以方便地将导出的多个 PNG 序列文件打包成 APNG 格式动图文件(扩展名仍为 .png)使用。

windows
转换 GIF 及 APNG 优化
Flash 转 APNG
视频转 APNG
注:请在电脑上打开使用以上链接
更多 APNG 优化及转换工具
剩下的就靠你了