lottietoqml Example | Qt Lottie Animation | Qt 6.11.2
Description: An example demonstrating the use of lottietoqml in an application.

- Qt 6.11
- Qt Lottie Animation
- Qt Lottie Animation Examples
- lottietoqml Example
- Qt Lottie Animation | Commercial or GPLv3

# lottietoqml Example

An example demonstrating the use of lottietoqml in an application.

This example demonstrates how the lottietoqml tool can be used to convert Lottie files into QML and then use these in an application.

#### Overview

The example consists of nine vector animations that have been converted using lottietoqml. They are displayed in a grid in a full screen application window.

If the user clicks on one of the animated images, it will zoom to fill the screen. Since the image is vector-based, it will remain crisp without any scaling artifacts.

The lottietoqml does the equivalent to what svgtoqml does for .SVG files. It converts as much as possible of the original vector image and animation to Qt Quick Shapes and other Qt Quick components. The result is a fully scalable and hardware-accelerated rendering of the animation.

For convenience, Lottie files can also be loaded at run-time through the VectorImage component. However, pregenerating the QML file is usually preferable, since this allows preprocessing the QML scene for faster loading.

     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
     )

In this example, the Lottie files are automatically converted to QML using the CMake function qt_target_qml_from_lottie().

#### Assets

This example contains animated vector images downloaded from the Lottiefiles list of free animations. All the images are licensed under the Lottie Simple License.

- "Fingerprint icon" by Solitudinem
- "Google Icons" by Jeffrey Christopher
- "Happy Star" by Natalia Świerz
- "Heartbeat | Medical" by Sarpreet Kalyan
- "Surprised Boy" by Hizen
- "USA Map with outlines blue" by Marina Trajkovska
- "User Interaction" by Mahendra Bhunwal
- "User Interface" by Bashir Ahmad
- "User Authentication" by Musa Adanur

Example project @ code.qt.io