lottietoqml-Beispiel

Dieses Beispiel zeigt, wie das lottietoqml- Tool verwendet werden kann, um Lottie-Dateien in QML zu konvertieren und diese anschließend in einer Anwendung zu nutzen.

Übersicht

Das Beispiel besteht aus neun Vektoranimationen, die mit lottietoqml konvertiert wurden. Sie werden in einem Raster in einem Vollbild-Anwendungsfenster angezeigt.

Wenn der Benutzer auf eines der animierten Bilder klickt, wird es so vergrößert, dass es den Bildschirm ausfüllt. Da das Bild vektorbasiert ist, bleibt es scharf und ohne Skalierungsartefakte.

„lottietoqml“ erfüllt dieselbe Funktion wie „svgtoqml“ für .SVG-Dateien. Es konvertiert so viel wie möglich vom ursprünglichen Vektorbild und der Animation in Qt Quick Shapes und andere Qt Quick Komponenten. Das Ergebnis ist eine vollständig skalierbare und hardwarebeschleunigte Darstellung der Animation.

Der Einfachheit halber können Lottie-Dateien auch zur Laufzeit über die Komponente „ VectorImage “ geladen werden. In der Regel ist es jedoch vorzuziehen, die QML-Datei vorab zu generieren, da dies eine Vorverarbeitung der QML-Szene für ein schnelleres Laden ermöglicht.

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 diesem Beispiel werden die Lottie-Dateien mithilfe der CMake-Funktion ` qt_target_qml_from_lottie()` automatisch in QML konvertiert.

Assets

Dieses Beispiel enthält animierte Vektorgrafiken, die aus der Lottiefiles-Liste kostenloser Animationen heruntergeladen wurden. Alle Bilder unterliegen der Lottie Simple License.

• „Fingerabdruck-Symbol“ von Solitudinem
• „Google Icons“ von Jeffrey Christopher
• „Happy Star“ von Natalia Świerz
• „Heartbeat | Medical“ von Sarpreet Kalyan
• „Surprised Boy“ von Hizen
• „USA-Karte mit blauen Umrissen“ von Marina Trajkovska
• „User Interaction“ von Mahendra Bhunwal
• „Benutzeroberfläche“ von Bashir Ahmad
• „Benutzerauthentifizierung“ von Musa Adanur

Beispielprojekt auf code.qt.io