本页

lottietoqml 示例

演示在应用程序中使用 lottietoqml 的示例。

动画矢量图形网格

本例演示如何使用lottietoqml工具将 Lottie 文件转换为 QML,然后在应用程序中使用这些文件。

概述

该示例包含九个使用lottietoqml 转换的矢量动画。它们以网格形式显示在全屏应用程序窗口中。

如果用户点击其中一张动画图片,它就会缩放以填满整个屏幕。由于图像是基于矢量的,它将保持清晰,不会出现任何缩放伪影。

单个动画矢量图形的放大视图

lottietoqml的功能相当于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 Simple License 许可

  • "指纹图标",作者 Solitudinem
  • "谷歌图标",作者:杰弗里-克里斯托弗
  • "快乐之星",作者:Natalia Świerz
  • "心跳|医疗",作者 Sarpreet Kalyan
  • "惊喜男孩",作者 Hizen
  • "玛丽娜-特拉伊科夫斯卡创作的 "蓝色轮廓的美国地图
  • "用户交互",作者:Mahendra Bhunwal
  • "用户界面",巴希尔-艾哈迈德(Bashir Ahmad
  • "用户验证",作者 Musa Adanur

示例项目 @ code.qt.io

© 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.