lottietoqml 示例
一个演示在应用程序中使用 lottietoqml 的示例。
本示例演示了如何使用lottietoqml工具将 Lottie 文件转换为 QML，并将其应用到应用程序中。
概述
该示例包含九个使用lottietoqml 转换的矢量动画。它们以网格形式显示在全屏应用程序窗口中。
如果用户点击其中一个动画图像，该图像将放大以填满屏幕。由于图像基于矢量，因此即使放大也不会出现任何缩放瑕疵，始终保持清晰锐利。
lottietoqml对于 Lottie 文件的作用与svgtoqml对于 .SVG 文件的作用相当。它会尽可能将原始矢量图像和动画转换为 Qt Quick Shapes 及其他 Qt Quick 组件。最终生成的动画渲染效果完全可缩放，并支持硬件加速。
为方便起见，Lottie文件也可通过VectorImage 组件在运行时加载。不过，通常建议预先生成QML文件，因为这样可以对QML场景进行预处理，从而加快加载速度。
qt_target_qml_from_lottie(applottietoqmlexample
CURVE_RENDERER
OPTIMIZE_PATHS
FILES
original/FingerprintIcon.json
original/GoogleIcons.json
original/HappyStar.json
original/HeartMedical.json
original/SurprisedBoy.json
original/USAMapWithOutlines.json
original/UserAuthentication.json
original/UserInteractionAnimation.json
original/UserInterface.json
OUTPUTS
generated/FingerprintIcon.qml
generated/GoogleIcons.qml
generated/HappyStar.qml
generated/HeartMedical.qml
generated/SurprisedBoy.qml
generated/USAMapWithOutlines.qml
generated/UserAuthentication.qml
generated/UserInteractionAnimation.qml
generated/UserInterface.qml
)在此示例中，Lottie 文件会通过 CMake 函数qt_target_qml_from_lottie() 自动转换为 QML。
资源
本示例包含从Lottiefiles 免费动画列表中下载的矢量动画图像。所有图像均遵循Lottie 简易许可协议。
- “指纹图标” 作者：Solitudinem
- “Google 图标” 作者：Jeffrey Christopher
- “Happy Star” 作者：Natalia Świerz
- “心跳 | 医疗” 作者：Sarpreet Kalyan
- “惊讶的男孩” 作者：Hizen
- “蓝色轮廓的美国地图” 作者：Marina Trajkovska
- “用户交互” 作者：马亨德拉·布恩瓦尔
- “用户界面” 作者：巴希尔·艾哈迈德
- “用户认证” 作者：穆萨·阿达努尔
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
