本页内容

qtlottieviewer 示例

演示如何使用Qt Quick 显示和控制Lottie动画。

带帧率和缩放控制功能的 Lottie 动画查看器

本示例演示了如何使用Qt.labs.lottieqt 模块,在Qt Quick 应用程序中直接显示和控制Lottie动画矢量图形文件。

展示了两种不同的方法:

  1. 结合使用VectorImage 与LottieVectorImageController
  2. 使用LottieAnimation

概述

示例窗口顶部有一个标签栏,可用于在VectorImage 和LottieAnimation 播放器之间切换。窗口的主体是一个矩形,其中包含所选的Lottie文件播放器,用于显示Lottie动画。

其下方是一行控件。用户可通过“帧率”滑块控制动画速度,并通过“缩放”滑块进行放大或缩小。用户可通过“播放/暂停”按钮停止或重启动画。暂停时,用户可使用“转到帧”滑块选择要显示的具体帧。 “打开”按钮将弹出文件对话框,允许用户选择要加载和显示的 Lottie 文件。

LottieAnimation 这是一个QQuickPaintedItem ,采用软件光栅化处理矢量图形。VectorImage 将矢量图形文件转换为一个QML组件,该组件利用 Qt Quick Shapes 模块,该模块采用硬件GPU渲染。

示例项目 @ code.qt.io

另请参阅 lottietoqml。

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