最近接手的項(xiàng)目上需要替換以前的UI資源，其中有部分動(dòng)態(tài)圖使用的是freso+webp進(jìn)行顯示很魂，然而設(shè)計(jì)給的只有一幀幀的PNG格式毅待，本來想隨便轉(zhuǎn)個(gè)GIF弄上去馒闷，結(jié)果透明背景的PNG轉(zhuǎn)成GIF很容易出現(xiàn)白色毛邊，這樣在非白色背景下顯示會非常粗糙叁征，于是找了幾種轉(zhuǎn)換的辦法纳账，發(fā)現(xiàn)還是直接生成webp比較符合要求，webp勝在圖片清晰捺疼，體積還惺璩妗（相對），于是搜到了某博主的文章（鏈接在文末啤呼，本文旨在補(bǔ)充并記錄）卧秘，了解到了google官方的這個(gè)webp轉(zhuǎn)換工具，其中就有img2webp這個(gè)方法可以實(shí)現(xiàn)用圖片合成動(dòng)態(tài)webp官扣，掌握了之后發(fā)現(xiàn)如此輕松簡單翅敌，步驟如下
1.首先下載libwebp工具包
工具包下載鏈接：https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html（直接拉到最下面 ，下載對應(yīng)操作系統(tǒng)的版本壓縮包惕蹄，帶no字樣的應(yīng)該是縮減版蚯涮，這里我用的是libwebp-1.1.0-windows-x64.zip）
下載解壓后可以看到bin目錄里有img2webp這個(gè)程序就是對的
2.然后復(fù)制這個(gè)bin目錄全路徑? 打開環(huán)境變量-系統(tǒng)變量 在Path變量里添加復(fù)制的路徑，點(diǎn)擊確定
壓縮包附帶了英文的使用文檔卖陵，img2webp使用方法如下遭顶，需要直接看生成步驟的請略過
The utility 'img2webp' can turn a sequence of input images (PNG, JPEG, ...)
into an animated WebP file. It offers fine control over duration, encoding
modes, etc.
Usage:
? img2webp [file-level options] [image files...] [per-frame options...]
對應(yīng)字段解釋
File-level options (only used at the start of compression):
-min_size ............ minimize size
-loop <int> .......... loop count (default: 0, = infinite loop)
-kmax <int> .......... maximum number of frame between key-frames
? ? ? ? ? ? ? ? ? ? ? ? (0=only keyframes)
-kmin <int> .......... minimum number of frame between key-frames
? ? ? ? ? ? ? ? ? ? ? ? (0=disable key-frames altogether)
-mixed ............... use mixed lossy/lossless automatic mode
-v ................... verbose mode
-h ................... this help
-version ............. print version number and exit
Per-frame options (only used for subsequent images input):
-d <int> ............. frame duration in ms (default: 100)
-lossless? ........... use lossless mode (default)
-lossy ... ........... use lossy mode
-q <float> ........... quality
-m <int> ............. method to use
example: img2webp -loop 2 in0.png -lossy in1.jpg -d 80 in2.tiff -o out.webp
3.由于我這里的PNG數(shù)量比較多，所以參考了博主的bat批處理泪蔫，實(shí)測沒問題（前提是環(huán)境變量配置OK）液肌，如果是少數(shù)圖片可以直接使用如上命令行，圖片較多可以放在一個(gè)全英文的目錄中鸥滨，然后修改圖片名稱為帶順序的數(shù)字嗦哆，10張以上請從100開始命名，否則命令執(zhí)行順序會亂婿滓，更多的圖片同理老速，命名結(jié)尾的數(shù)字需要大一位，bat命令如下：
@echo off
setlocal enabledelayedexpansion
:: 指定存放文件的目錄（必須為英文目錄凸主，不能有空格）
set SrcFolder=此處填寫目標(biāo)圖片文件夾全路徑
set DstFolder=此處填寫webp輸出的路徑
set imgs=
for /f "delims=\" %%a in ('dir /b "%SrcFolder%\*.png*"') do (
? echo %%a
? set "imgs=!imgs!"%%a" "
)
echo %imgs%
set /a loop = 0
set /a time = 40
set /a q = 65
cd /d %SrcFolder%
:: 執(zhí)行命令
img2webp -v -loop %loop% -lossy -q %q% -d %time%? %imgs% -o %DstFolder%\out_quality%q%_loop%loop%_frametime%time%.webp
img2webp -v -loop %loop% -lossless -d %time%? %imgs% -o %DstFolder%\out_lossless_loop%loop%_frametime%time%.webp
img2webp -v -loop %loop% -mixed -d %time%? %imgs% -o %DstFolder%\out_mixed_loop%loop%_frametime%time%.webp
pause
上面有三行 img2webp 命令? 分別輸出了有損橘券、無損、混合質(zhì)量的webp卿吐，有時(shí)候（比如圖片少旁舰、像素少）會出現(xiàn)無損webp比有損的體積更小，所以用哪種自行判斷嗡官，圖片不多可以直接生成三種再進(jìn)行選擇
4.新建txt文件復(fù)制如上命令箭窜，保存并修改后綴為bat，就可以直接雙擊使用了衍腥，彈出的cmd窗口會顯示完成狀態(tài)
這時(shí)候再去看輸出的目錄磺樱，就會發(fā)現(xiàn)對應(yīng)生成的webp文件了纳猫，在電腦上需要用瀏覽器打開預(yù)覽，至此竹捉，就可以直接拿到項(xiàng)目里取用啦芜辕！
失敗記錄：Frame #1 dimension mismatched! Got 29 x 17. Was expecting 29 x 19.
原因：有圖片尺寸不一致，是無法轉(zhuǎn)換成功的块差，需要找設(shè)計(jì)重新給圖侵续，尺寸大小需要一模一樣
最后感謝YogW的文章
參考鏈接：點(diǎn)擊此處跳轉(zhuǎn)
