lottietoqml Beispiel

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

Ü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 gestochen scharf und ohne Skalierungsartefakte.

Das Programm lottietoqml entspricht dem, was svgtoqml für SVG-Dateien tut. Es konvertiert so viel wie möglich von dem ursprünglichen Vektorbild und der Animation in Qt Quick Shapes und andere Qt Quick Komponenten. Das Ergebnis ist ein vollständig skalierbares und hardwarebeschleunigtes Rendering der Animation.

Der Einfachheit halber können Lottie-Dateien auch während der 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.

Assets

Dieses Beispiel enthält animierte Vektorbilder, die von der Lottiefiles-Liste freier Animationen heruntergeladen wurden. Alle Bilder sind unter der Lottie Simple License lizenziert.

• "Fingerabdruck-Symbol" von Solitudinem
• "Google-Symbole" von Jeffrey Christopher
• "Glücklicher Stern" von Natalia Świerz
• "Herzschlag | Medizinisch" von Sarpreet Kalyan
• "Überrumpelter Junge" von Hizen
• "USA-Karte mit blauen Umrissen" von Marina Trajkovska
• "Benutzerinteraktion" von Mahendra Bhunwal
• "Benutzeroberfläche" von Bashir Ahmad
• "Benutzerauthentifizierung" von Musa Adanur

Beispielprojekt @ code.qt.io