Exemple qtlottieviewer

Cet exemple montre comment utiliser le module Qt.labs.lottieqt pour afficher et contrôler directement un fichier graphique vectoriel animé Lottie dans une application Qt Quick.

Deux approches différentes sont présentées :

1. Utilisation de VectorImage avec LottieVectorImageController
2. Utilisation de LottieAnimation

Présentation

En haut de la fenêtre d’exemple se trouve une barre d’onglets permettant de basculer entre les lecteurs « VectorImage » et « LottieAnimation ». La partie principale de la fenêtre est constituée d’un rectangle contenant le lecteur du fichier Lottie sélectionné, qui affiche une animation Lottie.

En dessous se trouve une rangée de commandes. L’utilisateur peut contrôler la vitesse de l’animation à l’aide du curseur « Frame Rate » (Fréquence d’images) et effectuer un zoom avant ou arrière à l’aide du curseur « Scale » (Échelle). L’animation peut être arrêtée et relancée à l’aide du bouton « Play/Pause » (Lecture/Pause). Lorsqu’elle est en pause, l’utilisateur peut sélectionner l’image exacte à afficher à l’aide du curseur « Goto Frame » (Aller à l’image). Le bouton « Ouvrir » affiche une boîte de dialogue permettant à l’utilisateur de sélectionner un fichier Lottie à charger et à afficher.

LottieAnimation Il s'agit d'un composant « QQuickPaintedItem », utilisant la rastérisation logicielle des graphiques vectoriels. VectorImage convertit le fichier graphique vectoriel en un composant QML qui utilise le Qt Quick Shapes module, qui utilise le rendu GPU matériel.

Exemple de projet sur code.qt.io