不同的動圖-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;
        }
    };複製代碼