Lottie 动画导出为 GIF/MP4 以及与 QML 集成演示

获取 Lottie 动画文件

lottiefiles 是一个很好的网站, 从上面可以下载到别人分享的 lottie 动画文件.

我们可以下载到多种格式, 下面分别讲解每个格式的下载和适用情景.

下载 JSON 源文件

这是体积最小的格式, 一般在 10kb ~ 100kb 之间. 考虑到 lottiefiles 的服务器在国外, 下载这种格式是最快的.

下载完成后, 我们可以用本地工具将它转换成图像或视频文件. 见下面的 “文件格式转换” 部分.

下载 GIF 文件

lottiefiles 有一个特别强大的功能, 支持编辑 lottie 动画的颜色. 你可以在修改成自己喜欢的颜色后下载成 gif 文件.

但请注意, 免费版只能下载 150x150 大小的 gif, 这对大多数人来说都太小了, 糊得完全不能看. 开通会员后 (个人版 ~20 美元/月) 可以下载自定义大小的高清 gif (而且有更多功能).

如果你只是偶尔心血来潮, 想要下载一个动画, 那么可以考虑上一个格式. 我在后续小节会详细说明如何手动转换格式, 自给自足.

下载 MP4 文件

略. 这里稍微补充一下, 一般来说 mp4 文件体积是比 gif 小的.

Lottie 源文件 (JSON) 转其他格式

准备工作

1. 安装 python (推荐 3.8+, 本人在 3.11 上做了测试).

2. 安装以下 python 库:

   # 核心库
   lottie  # 用于转换各种格式
   
   # 下面这些选择其中一种或几种安装.
   pillow  # 用于生成图像, 包括动态图
   opencv-python  # 用于生成视频
   cairosvg  # 用于生成矢量图形
   

3. 此外, 如果要生成视频, 还需要安装 ffmpeg. (请自行搜索安装方法.)

开始转换

打开命令行, 操作:

# 假设我们的 python 路径为 <python>, json 文件路径为 <json>, 输出的文件为 <output>.
# ps: 如果不清楚自己的 python 路径, 输入 `py --list-paths` 可以看到.

# 生成 gif
py <python>/scripts/lottie_convert.py <json> <output>
#   示例: py "c:/programs files/python311/scripts/lottie_convert.py" d:/demo/input.json d:/demo/output.gif

# 生成 mp4
py <python>/scripts/lottie_convert.py <json> <output>
#   lottie_convert 会自动根据 output 的后缀名来判断生成什么格式的文件.

至此, 我们已经得到了动图文件或视频文件. 接下来可以用于 qml 布局中了.

添加到 QML 布局

下面给出的是 qml 的示例代码:

// demo.qml
// 注意: 我用的是 qt 6.4 (pip install pyside6). 如果你用的是 qt 5, 需要改一下 import 语句 (见下面的注释).

// qt 6 导入语法 (只用导入一个模块)
import QtQuick
// qt 5 导入语法 (尾部需要加版本号, 要导入两个模块)
//  import QtQuick 2.15
//  import QtQuick.Window 2.15

Window {
    width: 800
    height: 600
    visible: true

    AnimatedImage {
        anchors.centerIn: parent
        width: 400
        height: 400
        fillMode: Image.PreserveAspectFit
        smooth: true
        source: 'demo.gif'  // 请替换成你的实际文件路径
    }
}

运行看一下效果:

# 请预先安装 pyside6 和 lk-qtquick-scaffold
py -m lk_qtquick_scaffold run demo.qml

疑难解答

Q: 使用 JSON 转 GIF/MP4, 为什么背景色是黑色?

这是因为从 lottiefiles 网站下载的 json 文件不包含背景信息. 虽然在 lottiefiles 的在线编辑器中可以调整背景色, 但只有 lottiefiles 官方的下载通道才能获得有背景色的图像.

如果你只是偶尔想获取获取一个动画, 不想为此付费成为会员, 下面介绍一个比较 hack 的方法:

1. 下载 screen 2 gif 软件.
2. 打开 lottiefiles 在线编辑器, 调节成你想要的颜色.
3. 把播放模式改为单次播放.
4. 打开 screen 2 gif, 开始录制, 让在线编辑器完整地播放一遍.
5. 此时我们录制的 gif, 头尾都会有一些多余的重复帧, 请自己手动删除.
6. 用 screen 2 gif 导出 (这个工具支持导出为 gif, webp, mp4 (需要预先安装 ffmpeg) 等格式).

总的来说, 虽然步骤有些繁琐, 但效果还是不错的, 适合非付费用户临时解决, 自给自足.

补充: 还有一个方案是使用滤镜或者 ps/ae/pr 来调整背景色, 由于本人不熟悉, 没有做过研究.

Q: 我只有 JSON 文件, 该怎么修改 Lottie 的颜色表?

参考 https://stackoverflow.com/questions/59380353/lottie-animation-json-cannot-find-the-color

笔者没有实际试过, 不保证可行.

Q: 为什么不使用 Qt 自带的 LottieAnimation 类, 直接加载 JSON 不就行了吗?

qt 6.0+ 已经移除了 Qt.labs.lottiesqt 模块, 没有这个类了.

另外 5.0+ 虽然有支持, 但功能不够完善, 需要自行尝试踩坑.

相关链接

• https://lottiefiles.com/
• https://gitlab.com/mattbas/python-lottie/