Beispiel für qtlottieviewer

Dieses Beispiel zeigt, wie man mit dem Modul „ Qt.labs.lottieqt “ eine animierte Lottie-Vektorgrafikdatei direkt in einer „ Qt Quick “-Anwendung anzeigt und steuert.

Es werden zwei verschiedene Ansätze gezeigt:

1. Verwendung von „ VectorImage “ mit LottieVectorImageController
2. Verwendung von LottieAnimation

Übersicht

Im oberen Bereich des Beispielfensters befindet sich eine Registerleiste, über die zwischen dem „ VectorImage “- und dem „ LottieAnimation “-Player gewechselt werden kann. Den Hauptteil des Fensters bildet ein Rechteck, das den ausgewählten Lottie-Datei-Player enthält und eine Lottie-Animation anzeigt.

Darunter befindet sich eine Reihe von Steuerelementen. Der Benutzer kann die Animationsgeschwindigkeit mit dem Schieberegler „Frame Rate“ steuern und mithilfe des Schiebereglers „Scale“ hinein- und herauszoomen. Die Animation kann über die Schaltfläche „Play/Pause“ angehalten und neu gestartet werden. Im Pausenmodus kann der Benutzer mit dem Schieberegler „Goto Frame“ den genau anzuzeigenden Frame auswählen. Die Schaltfläche „Öffnen“ öffnet einen Dateidialog, in dem der Benutzer eine Lottie-Datei zum Laden und Anzeigen auswählen kann.

LottieAnimation ist ein „ QQuickPaintedItem “, der die Vektorgrafiken per Software-Rasterisierung darstellt. „ VectorImage “ wandelt die Vektorgrafikdatei in eine QML-Komponente um, die das Qt Quick Shapes Modul nutzt, das auf Hardware-GPU-Rendering basiert.

Beispielprojekt @ code.qt.io