最近接手的项目上需要替换以前的UI资源，其中有部分动态图使用的是freso+webp进行显示，然而设计给的只有一帧帧的PNG格式，本来想随便转个GIF弄上去，结果透明背景的PNG转成GIF很容易出现白色毛边，这样在非白色背景下显示会非常粗糙，于是找了几种转换的办法，发现还是直接生成webp比较符合要求，webp胜在图片清晰，体积还小（相对），于是搜到了某博主的文章（链接在文末，本文旨在补充并记录），了解到了google官方的这个webp转换工具，其中就有img2webp这个方法可以实现用图片合成动态webp，掌握了之后发现如此轻松简单，步骤如下
1.首先下载libwebp工具包
工具包下载链接：https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html（直接拉到最下面 ，下载对应操作系统的版本压缩包，带no字样的应该是缩减版，这里我用的是libwebp-1.1.0-windows-x64.zip）
下载解压后可以看到bin目录里有img2webp这个程序就是对的
2.然后复制这个bin目录全路径 打开环境变量-系统变量 在Path变量里添加复制的路径，点击确定
压缩包附带了英文的使用文档，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...]
对应字段解释
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数量比较多，所以参考了博主的bat批处理，实测没问题（前提是环境变量配置OK），如果是少数图片可以直接使用如上命令行，图片较多可以放在一个全英文的目录中，然后修改图片名称为带顺序的数字，10张以上请从100开始命名，否则命令执行顺序会乱，更多的图片同理，命名结尾的数字需要大一位，bat命令如下：
@echo off
setlocal enabledelayedexpansion
:: 指定存放文件的目录（必须为英文目录，不能有空格）
set SrcFolder=此处填写目标图片文件夹全路径
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%
:: 执行命令
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 命令 分别输出了有损、无损、混合质量的webp，有时候（比如图片少、像素少）会出现无损webp比有损的体积更小，所以用哪种自行判断，图片不多可以直接生成三种再进行选择
4.新建txt文件复制如上命令，保存并修改后缀为bat，就可以直接双击使用了，弹出的cmd窗口会显示完成状态
这时候再去看输出的目录，就会发现对应生成的webp文件了，在电脑上需要用浏览器打开预览，至此，就可以直接拿到项目里取用啦！
失败记录：Frame #1 dimension mismatched! Got 29 x 17. Was expecting 29 x 19.
原因：有图片尺寸不一致，是无法转换成功的，需要找设计重新给图，尺寸大小需要一模一样
最后感谢YogW的文章
参考链接：点击此处跳转
