如何製作apng

最簡便的方法是,網頁在線轉apng。這些網頁有:

二者對比:張鑫旭頁面比較簡潔,不過無法設置淡入淡出。ezgif可以淡入淡出,但是操作不甚理想。

如果你希望拿到能合成apng的本地工具,那麼可以考慮:


imagemagick

後来我在嘗試ffmpeg的時候並不是很順利,之後我見有人說imagemagick可以轉成apng,於是我就開始嘗試imagemagick。(下載過程中我還學會了怎麼在linux下多線程下載)

之後我在這裏找到了用imagemagick轉apng的方法(官網找不到)。

./magick -loop 0  -delay 100 1.png -delay 700 2.png APNG:r4.png
./magick -delay 100 -loop 0 1.png 2.png APNG:r3.png

值得注意的是,它的時間單位不是秒,也不是千分之一秒,而是百分之一秒。

如果所有圖片切換速度一樣,就放-delay在最前面。如果要指定每一張圖片的切換時間,就放在每一張圖片的前面。

之後,我又嘗試了用imagemagick把.mp4轉成apng,這也是可以的。但是,一個443k的.mp4,轉成apng之後就成了8.5M。比網頁轉換的結果大很多,原因是網頁轉換時作了參數調整。目前我還不知道如何用imagemagick轉換apng時調整參數。

比較gif跟apng

我用六張序列圖,来比較gif跟apng的大小。

  • ezgif跟upng生成的apng大小分別為27k和33k。
  • gimp生成的gif有100k,即使我摳同色法降低體積,gif仍要70k。

結論就是,apng不僅效果好,而且體積小。

並且,apng還有一個更為巨大的優點是,它可以用js来控制播放和停止。

UPNG.js

因為張鑫旭也跟我一樣是做前端的,他用的是upng.js完成apng的合成(比本地的imagemagick好用)。因此我也想跟他學一手。

  1. 下載upng.js
  2. 建個html,導入upng.js
  3. 上傳多圖,拿到圖源
  4. 生成apng,提供下載

Leave a Comment