不一样的动图-APNG

动图

说到动图,首先我们想到的 GIF 格式,GIF 在网络上流行已久,各种动态表情包都是 GIF 图做的。 但是 GIF 的缺点也很明显,透明背景的 GIF 无法做到像素的绝对平滑过度,于是乎我们可以看到带透明的 GIF 图周围杂边非常明显,如下:

通常解决这种问题是在外面加上一圈白色的描边,这样在白色背景下可以掩盖杂边问题,但是在深色背景下依然无解:

APNG 完美的解决了这个问题。

APNG

APNG 全称是 Animated Portable Network Graphics , 是 PNG 格式的动画扩展。APNG 的第1帧为标准PNG图像,剩余的动画和帧速等数据放在PNG扩展数据块里。这里有点类似于视频的关键帧,关键帧有完整的图像信息,而两个关键帧之间只保留了变化的信息。

简单来说,APNG 支持全彩和透明,无杂边问题,如丝般润滑:

不过,APNG 的标准化之路相当坎坷,2004年创立以来,知道今天依然没能被纳为 PNG 的标准。不过真金不怕红炉火,酒香不怕巷子深,越来越多的软件开始支持 APNG,也有很多开源库可以让我们用上 APNG。

Android 上有APNG View 等,iOS 上有 APNGKit 等。

而 Web 上,Firfox 和 Safari 是支持 APNG 的,不过 Chrome 不支持。 Chrome 支持自己的亲儿子 WebP,不支持 APNG,而苹果支持 APNG,不支持 WebP,真是好任性,可以一人让一步都支持吗?

不过,Web 上想用 APNG 还是有办法的,我们有强大的 Canvas 啊!

Canvas & APNG

Web 上我们用 Canvas 来渲染 APNG,主要用到一个开源库 apng-canvas

简单写了个 Demo :

html如下:

<body>
    <img class="apng" id="apng-basketball" src="./apng-basketball.png">

    <div>
        <img src="./elephant.gif">
        <img class="apng" id="apng-elephant" src="./elephant.png">
    </div>
    <div>
        <div class="color-item" style="background-color:red"></div>
        <div class="color-item" style="background-color:yellow"></div>
        <div class="color-item" style="background-color:black"></div>
        <div class="color-item" style="background-color:white"></div>
    </div>
    <script type="text/javascript" src="./apng-canvas.min.js"></script>
</body>

比较简单,这里用了两张 APNG 图片和一张 GIF 图,下面写了几个 div 用来改变背景色。最后引入了 apng-canvas 这个库。

javascript代码如下:

    var imgs = document.querySelectorAll(".apng");
    APNG.ifNeeded().then(function(){
        for (var i=0; i < imgs.length; i++) {
            APNG.animateImage(imgs[i]);
        };
    });

    var colorItems = document.querySelectorAll(".color-item");
    for (var i=0; i < colorItems.length; i++) {
        colorItems[i].onclick = function(){
            var color = this.style.backgroundColor;
            document.body.style.backgroundColor = color;
        }
    };

代码很简单,APNG 这个对象就是 apng-canvas 这个库提供的,ifNeeded() 函数用来判断浏览器是否支持APNG,如果支持,后面的事情我们就不用干了。

APNG.animateImage(imgs[i]); 这里传入一个 Image Element,之后什么插入 Canvas 什么渲染之类的活就全部帮我们做完了,简直是太方便了,太方便了(口水已经流出来了)。

效果如下:

这里录的可能不是很清晰,推荐直接访问线上 Demo:

http://imbeta.cn/demo/apng/apng.html

制作APNG

已经有很多工具可以制作 APNG 了,可以参考张鑫旭大大的博客APNG历史、特性简介以及APNG制作演示 以及 http://littlesvr.ca/apng/

另外,我们组也有一款 APNG 制作和压缩工具,isparta,制作人是 jeakeyliang 和 hahnzhu 。

在说几句关于和 GIF 体积的比较,无损 APNG 大概是比 GIF 稍微大一点,有损压缩之后,APNG 可以比 GIF 小约 30% 而且也没有杂边问题。

另外,Line 的的动态贴图,还有 iOS 10 iMessage 中的各种动态表情也都是使用 APNG 的,看来前途还是光明的嘛。


Demo 的源码地址: https://github.com/bob-chen/canvas-demo/tree/master/basic/apng

参考

https://davidmz.github.io/apng-canvas/

http://www.zhangxinxu.com/wordpress/2014/09/apng-history-character-maker-editor/

https://isux.tencent.com/introduction-of-apng.html

https://www.zhihu.com/question/27201109

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

web图像的常见应用策略与技巧

本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思...

21390
来自专栏前端架构与工程

SVG的动态之美-搜狗地铁图重构散记

32800
来自专栏数据小魔方

think-cell chart系列18——复合图表与次坐标轴

今天跟大家分享的是think-cell chart系列的第18篇——复合图表与次坐标轴。 今天要跟大家讲解如何在think-cell chart中开启次坐标轴,...

1.4K70
来自专栏腾讯社交用户体验设计

[ISUX译]响应式图像 - 腾讯ISUX

11110
来自专栏理论坞

【教程】复古电影海报效果设计

2、新建一个图层命名cloud,用吸管工具吸取人像上最暗地方的颜色,选择滤镜—渲染—云彩,如下。

8220
来自专栏腾讯社交用户体验设计

web图像的常见应用策略与技巧

11510
来自专栏阿凯的Excel

金字塔图绘制(Excel绘制图表系列课程)

今天和大家分享金字塔图的绘制 什么是金字塔图呢?就是长得很像金字塔的图! 哦! 问:那是长这样? ? 答:额,有点像,但是不是! 问:那是怎样? 答:如下图。...

45530
来自专栏偏前端工程师的驿站

CSS魔法堂:小结一下Box Model与Positioning Scheme

前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考。 《CSS魔法堂:重新...

19260
来自专栏Material Design组件

Human Interface Guidelines —— Image Views & Maps & Pages

33170
来自专栏PPV课数据科学社区

《用地图说话》之:十字绣中国热力数据地图

作图思路: 准备一块300*300小单元格组成的区域,对照地图图形,在每个省图形范围内的单元格填入该省的数据,然后对这些单元格应用条件格式->色阶,就形成了一幅...

32030

扫码关注云+社区

领取腾讯云代金券