不同的动图-APNG

时间 2019-11-17

标签不同 apng 繁體版

原文原文链接

动图

说到动图，首先咱们想到的 GIF 格式，GIF 在网络上流行已久，各类动态表情包都是 GIF 图作的。
可是 GIF 的缺点也很明显，透明背景的 GIF 没法作到像素的绝对平滑过分，因而乎咱们能够看到带透明的 GIF 图周围杂边很是明显，以下：javascript

一般解决这种问题是在外面加上一圈白色的描边，这样在白色背景下能够掩盖杂边问题，可是在深色背景下依然无解：html

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

APNG

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

简单来讲，APNG 支持全彩和透明，无杂边问题，如丝般润滑：程序员

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

Android 上有APNG View 等，iOS 上有 APNGKit 等。canvas

而 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;
        }
    };复制代码