• 動畫應(yīng)用的五個階段
  • 第一階段：上古階段
  • 第二階段：輕應(yīng)用階段
  • 第三階段：腳本動畫時代
  • 第四階段：富媒體精細(xì)呈現(xiàn)階段
• 矢量腳本動畫的集大成者-Bodymovin和Lottie
• APNG方案
  • 什么是apng
  • APNG 簡史
    • MNG
    • APNG
    • libpng程序庫
    • 首次支持
    • 標(biāo)準(zhǔn)化申請
  • 為什么GIF能存活這么長時間
  • 為什么要取代它汰瘫？
  • APNG 的組成
  • APNG 幀間優(yōu)化
• 預(yù)覽APNG
• 制作APNG
  • 使用在線工具制作
  • 使用AE插件制作
    • BX-Webp/Apng Exporter插件
    • 如何安裝：
    • 使用步驟：
    • 工具原理
    • iSparta及其它工具

動畫應(yīng)用的五個階段

眾所周知，動畫责静，這一表現(xiàn)形式墨缘，作為web與移動開發(fā)的重要展現(xiàn)形式星虹，一直占據(jù)著很重要的地位。
縱觀互聯(lián)網(wǎng)時代的動畫镊讼，經(jīng)歷過以下五個階段：

第一階段：上古階段

這階段的動畫以flash（.swf格式）等為表現(xiàn)形式宽涌，重在富媒體。

第二階段：輕應(yīng)用階段

隨著人們對flash帶來的不開放蝶棋、安全以及大文件反感卸亮，人們紛紛將動畫轉(zhuǎn)向了gif為代表的輕動畫階段，雖然早在macromedia公司的網(wǎng)頁三劍客中玩裙，就分別提供了swf兼贸、gif兩大格式的制作工具，分別為flash吃溅、fireworks溶诞，但swf后期在網(wǎng)頁上的泛濫成災(zāi)，一渡以“動圖”作為表現(xiàn)决侈，深受歡迎螺垢。

第三階段：腳本動畫時代

以純web（web即os、云計算）為代表的時到來，Google登上時代舞臺的中央枉圃，提出ajax等一系列理念功茴，引導(dǎo)行業(yè)以javascript、jquery為代表的腳本動畫時代孽亲。

第四階段：富媒體精細(xì)呈現(xiàn)階段

全球互聯(lián)網(wǎng)設(shè)施大幅改進坎穿、4G+時代到來，進入了mp4視頻動畫時代返劲，這主要體現(xiàn)在本世紀(jì)20年代玲昧，由于mp4類動畫的能夠表現(xiàn)得更加細(xì)膩，也就更加深受歡迎旭等。
同時諸如svg酌呆、cavans等矢量格式也走上了舞臺的中央。
這其中集成了包括 JS搔耕、CSS的最新技術(shù) 隙袁。

矢量腳本動畫的集大成者-Bodymovin和Lottie

在矢量化呈現(xiàn)階段中，最優(yōu)秀的應(yīng)當(dāng)屬Bodymovin和Lottie方案弃榨，這是facebook團隊的一個開源項目 菩收。
為此，我們做了全部復(fù)盤鲸睛，寫在：
《看逐浪CMS技術(shù)小哥做SVG動畫（附使用Bodymovin和Lottie將Adobe After Effects(AE)程式轉(zhuǎn)為 HTML5/Android/iOS原生的動畫全過程-即AE轉(zhuǎn)svg\canvas\html5動畫）》
一文中娜饵，也是目前在知乎上答案點贊最多的方案。
https://www.z01.com/blog/products/3524.shtml

APNG方案

什么是apng

下面開始祭出本文的主題官辈，APNG箱舞。

之前諸多方案，要么是文件過大拳亿，要么是呈現(xiàn)過差晴股，要么安全性不足，要么就是跨平臺性不夠肺魁。
于是21世紀(jì)20年代后期电湘，APNG正式登上舞臺。

說到動圖鹅经，大家首先想到的肯定是 GIF寂呛。但 GIF 最大的缺點是，圖像是基于顏色列表的（存儲的數(shù)據(jù)是該點的顏色對應(yīng)于顏色列表的索引值）瘾晃，最多只支持 8 位（256 色）贷痪。這使得使用 GIF 格式不可能得到高清的動畫圖片。

APNG 是 Mozilla 在 2008 年發(fā)布的一種圖片格式酗捌，旨在替換掉畫質(zhì)低劣的 GIF 動畫呢诬。它實際上只是相當(dāng)于 PNG 格式的一個擴展涌哲，所以 Mozilla 一直想把它合并到 PNG 標(biāo)準(zhǔn)里面去胖缤，但它目前并沒有獲得 PNG 組織官方的認(rèn)可尚镰。

APNG 簡史

MNG

在 APNG 之前它還有一個老冤家叫 MNG（Multiple-image Network Graphics）即多圖像網(wǎng)絡(luò)圖形，1996 年 6 月提出 PNF（Portable Network Frame）草案哪廓，同年8月更名為 MNG 狗唉，2001 年 1 月 31 日發(fā)布 MNG 規(guī)范 1.0 版本，MNG 是出自 PNG 開發(fā)組之手涡真，但由于結(jié)構(gòu)復(fù)雜的 MNG 程序庫分俯，使用過程會占用大量的資源，早期只有較少的瀏覽器支持哆料，Chrome缸剪、IE、Opera东亦、Safari 則從未支持過杏节。

APNG

2004 年，由 Mozilla 公司兩位 Mozilla 程序員 Stuart Parmenter 和 Vladimir Vuki?evi? 共同設(shè)計出 APNG典阵，他們希望 Mozilla 社區(qū)能使用它奋渔，但提案未能通過。

libpng程序庫

2006 年壮啊，Google Summer of Code 活動中嫉鲸，加拿大圣力嘉學(xué)院的學(xué)生為 libpng 程序庫加入了對 APNG 支持，此后開發(fā)者再次推薦給 Mozilla 社區(qū)歹啼，不過仍然遭到拒絕玄渗。

首次支持

2007 年 3 月 23 日，Mozilla 后知后覺狸眼，在 Mozilla Firefox 3.0 中 首次支持 APNG 格式藤树。

標(biāo)準(zhǔn)化申請

2007 年 4 月 20 日，Mozilla 希望 APNG 能成為官方標(biāo)準(zhǔn)份企，因此 PNG 組織發(fā)起投票也榄，最終以8：10的票數(shù)否決了 APNG 進了官方標(biāo)準(zhǔn)，因為 PNG 組織決心繼續(xù)推廣 MNG司志，但這不并影響 Mozilla 繼續(xù)支持 APNG甜紫。

為什么GIF能存活這么長時間

誕生于 1987 年的 GIF 為什么能存活這么久？

主要有四個原因：

• 幾乎所有的主流瀏覽器都支持 GIF
• 早期選擇不多骂远，GIF 幾乎是唯一選擇（GIF - 1987囚霸、JPEG - 1992、PNG - 1996激才、APNG - 2004拓型、WebP - 2010）
• 實現(xiàn)起來簡單额嘿，制作的工具多
• 采用 LZW 數(shù)據(jù)壓縮算法，使得 GIF 體積小劣挫，在早期慢速的互聯(lián)網(wǎng)易于傳播

為什么要取代它册养？

1.圖像質(zhì)量
下面兩個文件，不用說压固，圖2清晰的那個是apng

<div style="background:#000;padding:2rem;color:#fff;font-size:3rem;text-align:center;">

elephant.gif

GIF 337KB

elephant.png

APNG 379KB

</div></div>

c92cc27e26c9422fbd99229b0ba59636.jpeg

apng與gif對比

如果你使用的是非 Firefox球拦、Safari 瀏覽器，那 APNG 格式的圖片會向下兼容顯示為靜態(tài)圖帐我，你可以更換 Firefox坎炼、Safari 瀏覽器或者在 Chrome 瀏覽器安裝 APNG Extension for Google Chrome 擴展來兼容，通過兩者對比能總結(jié)出以下區(qū)別：

GIF：

• 最多支持 8 位 256 色拦键，色階過渡糟糕谣光，圖片具有顆粒感
• 不支持 Alpha 透明通道，邊緣有雜邊

APNG：

• 支持 24 位真彩色圖片
• 支持 8 位 Alpha 透明通道
• 向下兼容 PNG

2.圖片體積

QQ截圖20220604145032.jpg

從幾組 GIF芬为、APNG萄金、WebP 的對比中可以發(fā)現(xiàn)，無論在純色的圖片或是多彩的圖片碳柱，大部分情況下 APNG 依舊能比 GIF捡絮、WebP 以及有損的 WebP 的體積小。

APNG 的組成

APNG 是基于 PNG 格式擴展的莲镣，首先需要了解一個簡單的 PNG 文件組成結(jié)構(gòu)：

PNG Signature | IHDR | IDAT | IEND

PNG 由 4 部分組成福稳，首先以 PNG Signature（PNG簽名塊）開頭，緊接著一個 IHDR（圖像頭部塊）瑞侮，然后是一個或多個的 IDAT（圖像數(shù)據(jù)塊）的圆，最終以 IEND（圖像結(jié)束塊）結(jié)尾。

APNG 規(guī)范引入了三個新大塊半火，分別是：acTL（動畫控制塊）越妈、fcTL（幀控制塊）、fdAT（幀數(shù)據(jù)塊）钮糖，下圖是三個獨立的 PNG 文件組成 APNG 的示意圖梅掠。

QQ截圖20220604145113.jpg

• acTL 塊必須在第一個 IDAT 塊之前，用于告訴解析器這是一個動畫 PNG店归，包含動畫幀總數(shù)和循環(huán)次數(shù)的信息
• fcTL 塊是每一幀都必須的阎抒，出現(xiàn)在 IDAT 或 fdAT 之前，包含順序號消痛、寬高且叁、幀位置、延時等信息
• fdAT 塊與 IDAT 塊有著相同的結(jié)構(gòu)秩伞，除了 fcTL 中的順序號
  從圖中可以發(fā)現(xiàn)第一幀與后面兩幀不同逞带，那是因為第一幀 APNG 文件存儲的為一個正常的 PNG 數(shù)據(jù)塊欺矫，對于不支持 APNG 的瀏覽器或軟件，只會顯示 APNG 文件的第一幀展氓，忽略后面附加的動畫塊穆趴，這也是為什么 APNG 能向下兼容 PNG 的原因。

APNG 幀間優(yōu)化

APNG 會通過算法計算幀之間的差異带饱，只存儲幀之前的差異毡代，而不是存儲全幀阅羹，使得 APNG 文件大小有顯著的減少勺疼。

預(yù)覽APNG

目前最方便的預(yù)覽apng的方式，是使用電腦上的瀏覽器來瀏覽捏鱼。
當(dāng)然推薦使用chrome或edge現(xiàn)代瀏覽器执庐，而IE是顯然不支持的。
也正是因為預(yù)覽apng動圖需要拖拽到瀏覽器中才可以查看動畫导梆，所以傳播性沒有GIF圖強轨淌。

制作APNG

已經(jīng)有很多工具支持制作 Animated PNG 圖片，相信將來也會越來越多看尼。

使用在線工具制作

如果只是想體驗一下制作的效果递鹉，可以使用這個站點來快速生成： assembler

使用AE插件制作

BX-Webp/Apng Exporter插件

Adobe After Effects強大的視頻制作能力，天下能有出其右者藏斩。
而基于ae的插件躏结，自然是不少設(shè)計師、開發(fā)者的首選狰域。

基原理是通過BX-Webp/Apng Exporter插件在AE軟件中來實現(xiàn)媳拴。

<video width="820" height="440" controls>
<source src="https://code.z01.com/apng.mp4" type="video/mp4">
您的瀏覽器不支持 video 標(biāo)簽。
</video>

如何安裝：

• 1.下載 BX-WebpApngExporter.zxp 文件兆览，點擊這里下載.https://raw.githubusercontent.com/bigxixi/webp_apng_exporter_for_AE/master/BX-WebpApngExporter.zxp
• 2.根據(jù)自己的操作系統(tǒng)下載 ZXP 安裝工具：
  https://aescripts.com/learn/zxp-installer/
  然后將 BX-WebpApngExporter.zxp 拖進安裝工具（或者通過 File -> Open 選擇該文件安裝）

(注：如果不能打開屈溉，說明是外網(wǎng)，不代表URL無效)抬探。

使用步驟：

• 1子巾、AE 中打開需要導(dǎo)出的合成，在「合成設(shè)置」中設(shè)置好幀率小压。
• 2线梗、在「窗口」-「擴展」中運行「BX Webp/Apng Expoter」。
• 3场航、選擇要導(dǎo)出的格式的對應(yīng)導(dǎo)出地址缠导，并根據(jù)情況勾選「是否導(dǎo)出」。
  （點擊「WEBP 地址」溉痢、「APNG地址」按鈕來選取僻造，也可以手動輸入憋他、修改。）
• 4髓削、設(shè)置畫質(zhì)竹挡，取值為0-100之間的整數(shù)，數(shù)字越大畫質(zhì)越好立膛，圖片越大揪罕。
• 5、設(shè)置循環(huán)次數(shù)宝泵，取值為整數(shù)好啰，0為無限循環(huán)。

[圖片上傳失敗...(image-b8931d-1654325261767)]

工具原理

下面是一段插件運行時儿奶，在e:\desktop目錄下產(chǎn)生的一個臨時bat腳本：

@echo off
setlocal enabledelayedexpansion
set SrcFolder="E:\華為主題\0531學(xué)習(xí)\a01"
set DstFileApng="E:\華為主題\0531學(xué)習(xí)\a01.png"
set apngasm="C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\com.bigxixi.WebpApngExporter\apps\win\apngasm64.exe"
set pngq="C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\com.bigxixi.WebpApngExporter\apps\win\pngquant.exe"

set /a loop = 0
set /a fps = 20
set /a q = 80
set /a fDuraton = 1000/%fps%

cd /d %SrcFolder%
for /f "delims=" %%i in ('"dir /a/s/b/on *.png*"') do (  
  echo %%i
  %pngq% "%%~nxi" --speed 1 --quality %q% -f --ext .png
  set "imgs=!imgs!"%%i" "
) 
echo %imgs%

%apngasm% %DstFileApng% %imgs% 1 %fps% -l%loop%

cd ..
rd /s /Q %SrcFolder%

cd "E:\華為主題\0531學(xué)習(xí)"
start .
del %0

iSparta及其它工具

也有朋友覺得使得BX-Webp/Apng ExporterAE插件過于麻煩（是的框往，這個插件有時會最終無法合成）。
那沒關(guān)系闯捎，我們還有iSparta等工具椰弊。
以iSparta工具為例，則可以直接將序列PNG合并成APNG動畫瓤鼻。

其使用方法如下：
一秉版、下載iSparta
在此鏈接：https://github.com/iSparta/iSparta/releases 下載對應(yīng)電腦系統(tǒng)的 iSparta ，也可以通過本文檔附帶的“iSparta安裝包”來獲取茬祷，并安裝好清焕。目前支持windows、mac牲迫、linux 三個系統(tǒng)版本耐朴。安裝后打開iSparta。

a.png

二盹憎、導(dǎo)入文件
1筛峭、文件序列化：將需轉(zhuǎn)換的每一幀PNG（每一幀的圖片尺寸必須相同）的文件名按照序列來命名（如xxx01.png、xxx02.png陪每、xxx03.png…xxx11.png）影晓。注：數(shù)字的位數(shù)要保持一致，比如有15幀檩禾，第一幀的數(shù)字應(yīng)該是01挂签，以此類推

2.png

導(dǎo)入文件：將序列化好的文件（或者包含序列化好的文件的文件夾）拖到 iSpata 面板，或者直接點擊面板中心區(qū)選擇目錄盼产。

3.png

三饵婆、 參數(shù)配置
把 png 圖片拖進去后，“輸出設(shè)置”面板也就是下圖的 A 區(qū)會自動出現(xiàn)戏售，也可以手動點擊右下角的設(shè)置icon侨核，也就是下圖的 B 區(qū)打開草穆。可配置參數(shù)為：幀頻（默認(rèn)26幀/秒）搓译、循環(huán)次數(shù)（默認(rèn)無限循環(huán)）悲柱、輸出文字、輸出格式些己、壓縮質(zhì)量（默認(rèn)為80%）豌鸡。

（1） 這些配置項更改后均會保存起來，下次打開應(yīng)用程序時會恢復(fù)上一次的設(shè)置段标。

（2）其中涯冠，壓縮比越高輸出的質(zhì)量越好，如果對輸出的圖片質(zhì)量不滿意怀樟，可以嘗試修改壓縮比來提高輸出的圖片質(zhì)量功偿。

（3）如果某些幀之間需要延時，可以將需要延時的幀圖片復(fù)制幾張（按延時長短決定復(fù)制數(shù)量）往堡，然后再重新按序列命名圖片。

（4）輸出目錄默認(rèn)是在每幀 png 圖片所在的目錄共耍。也可以通過點擊 C 區(qū)重新選擇輸出目錄虑灰。

4.png

5.png

6.png

四、 輸出
點擊“開始”按鈕，轉(zhuǎn)換過程會花費一定的時間，請耐心等待芥映。面板會提示轉(zhuǎn)換進度结澄。

7.png

8.png

五、 查看
在相應(yīng)的輸出目錄找到輸出的APNG圖片梯嗽，使用chrome、edge、firefox等現(xiàn)代瀏覽器打開該圖片即可看到圖片動態(tài)效果拍柒。

或者使用瀏覽器（chrome）打開APNG在線查看器，將生成的apng圖片拖入即可查看屈暗。

囿于時間拆讯，關(guān)于APNG圖片的介紹就寫到這里， 更多信息請訪問Zoomla!逐浪CMS官網(wǎng)养叛，我們將不斷更新方面的知識种呐，為同行提供優(yōu)秀的開發(fā)工具和中間件。