qtlottieviewer Example

This example demonstrates how to use the Qt.labs.lottieqt module to directly display and control a Lottie animated vector graphics file in a Qt Quick application.

Two different approaches are shown:

1. Using VectorImage with LottieVectorImageController
2. Using LottieAnimation

Overview

At the top of the example Window is a tab bar that allows switching between the VectorImage and the LottieAnimation players. The main part of the window is a Rectangle containing the selected Lottie file player, displaying a Lottie animation.

Below this is a row controls. The user can control the animation speed with the Frame Rate slider, and zoom in and out using the Scale slider. The animation can be stopped and restarted using the Play/Pause button. When paused, the user can select the exact frame to be displayed using the Goto Frame slider. The Open button will display a file dialog, allowing the user to select a Lottie file to load and display.

LottieAnimation is a QQuickPaintedItem, employing software rasterization of the vector graphics. VectorImage translates the vector graphics file to a QML component that utilizes the Qt Quick Shapes module, which employs hardware GPU rendering.

Example project @ code.qt.io