ae动图导出webp

2026-05-27 #webp

引言

我记得当时是为了做web的背景动画被迫使用了webp,gif无法实现,默认导出的webp又不能用,不过最后还是研究出来了。

过程

1
2
3
4
5
6
7
8
9
10
11
12
13
1.打开ae,添加到导出渲染队列
2.队列视频输出模块选择
格式: QuickTime
通道: RAB+Alpha (此处需要选择格式选项)
格式选项-> 视频编码器: 动画
深度: 数百万种以上颜色
颜色: 预乘

关闭音频输出
3.渲染
4.将渲染的动画.mov放到ffmpeg目录下
5.执行
ffmpeg -i 动画.mov -pix_fmt yuva420p -lossless 1 -filter:v fps=20 -loop 0 动画.webp

预览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebP Animation Example</title>
<style>
/* 设置页面背景色 */
body {
background-color: #f30a0a; /* 浅灰色背景 */
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}
</style>
</head>
<body>
<h1>WebP 动画示例</h1>
<img src="动画.webp" alt="Transparent WebP Animation"/>
</body>
</html>

img.png

评论
分享
Views
Users
Today