png序列帧转换WebP动画

最近项目要用webp格式展示动画(webp格式的优点在这我就不说了,baidu很多),由于UI同学无法给予我们支持,只能给我们png序列帧文件,所以接下来的事情需要开发自己转换,所有有了这篇的总结:进入正题

对于png 、jpg、 gif 等格式转换webp ,google给提供了命令行工具,下载地址:https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html
可以找到对应系统版本,在这里我用的是libwebp-1.0.0-rc2-mac-10.13.tar.gz ,所以我是在mac 环境下进行操作的

工具介绍

下载下来后,解压文件夹,目录如下:
这里写图片描述

bin文件夹下就是给我们提供的工具:

这里写图片描述

这些方法我不是全部了解,只知道常用的:cwebp、dwebp、gif2webp、imag2webp、webpmux

但是它给我们提供了doc和README文档,里面都有对工具的说明,我看的是根目录下的README文档,里面是说明的集合

由于我这次要找的是png序列帧转换webp动画,所以我在文档中找到了这样一个方法:

Animation creation tool:
========================
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...]

//还给了例子
example: img2webp -loop 2 in0.png -lossy in1.jpg -d 80 in2.tiff -o out.webp

意思就是:img2webp可以转换图像序列(PNG, JPEG等格式)
进入一个动画的WebP文件

见到这句话感觉眼都亮了,赶快试一下效果

工具的安装:

先配置下环境变量,配置到bin,bin下所有工具都可以使用,下面是我存放的位置,需要替换成自己的

export WEBP=/Users/jiangshujing/Downloads/libwebp-1.0.0-mac-10.13/bin

//将WEBP 添加到PATH中
export PATH=${PATH}:${ANDROID_HOME}/platform-tools:${ANDROID_HOME}/tools:${JAVA_HOME}:${WEBP}

配置完成后,就可以用这些工具了,
我们打开终端,输入命令
如:

img2webp -loop 0 -lossy imag1.png imag2.jpg imag3.jpg -o out.webp

ok webp动画转换搞定了

操作符:

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

快速输出webp 脚本文件

由于序列帧比较多,不能手动一个一个敲,我写了个shell脚本,可以直接使用(对shell 不是很熟悉,不过功能可以实现)

一下为shell脚本内容,之后我会上传的

read -p "Please input directory path : " path
echo "directory path is :" $path

filelist=`ls $path`
echo $path  
imgs=''
#echo $path
for file in $filelist
do 
#这里只操作png文件
if [ -f $file ] && [ "${file##*.}" = "png" ]
then

imgs=$imgs$file" "
fi
done
img2webp -loop 0 -lossy $imgs -o $path"/"out.webp #执行命令

shell 脚本使用(img2webp.sh)

在终端中执行 img2webp.sh 文件,提示输入要转换的序列帧文件夹路径,然后回车,会在根目录生成out.webp文件,ok了

$ /Users/jsj/Desktop/img2webp.sh 

Please input directory path : /Users/jsj/Downloads/imags

方法二

png序列帧转换webp动画,除了使用goolge提供的img2webp 工具,还可以使用 cwebp + webpmux,先将png文件通过cwebp工具分别进行转换为webp静态序列,质量压缩等自己可以根据需求转换,然后在用webpmux 工具,将所有的webp静态序列打包成webp动态动画,这个过程我也有写成shell脚本,名字为webpmux.sh ,使用方法同img2webp.sh一样

此方法是通过 https://www.jianshu.com/p/8dc745523e03 给出的办法,在这里也谢谢作者

对于webp文件,Android用Fresco加载的

工具地址:https://download.csdn.net/download/hjiangshujing/10449690

发布了33 篇原创文章 · 获赞 5 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/hjiangshujing/article/details/80522452