Exemple de lottietoqml

Cet exemple montre comment l'outil lottietoqml peut être utilisé pour convertir des fichiers Lottie en QML, puis les intégrer dans une application.

Présentation

L'exemple se compose de neuf animations vectorielles qui ont été converties à l'aide de lottietoqml. Elles sont affichées sous forme de grille dans une fenêtre d'application en plein écran.

Si l’utilisateur clique sur l’une des images animées, celle-ci s’agrandit pour occuper tout l’écran. L’image étant vectorielle, elle reste nette, sans aucun artefact de mise à l’échelle.

L'outil lottietoqml effectue une opération équivalente à celle de svgtoqml pour les fichiers .SVG. Il convertit autant que possible l’image vectorielle et l’animation d’origine en Qt Quick Shapes et d’autres Qt Quick composants. Il en résulte un rendu de l’animation entièrement redimensionnable et bénéficiant d’une accélération matérielle.

Pour plus de commodité, les fichiers Lottie peuvent également être chargés à l’exécution via le composant VectorImage. Cependant, il est généralement préférable de pré-générer le fichier QML, car cela permet de pré-traiter la scène QML pour un chargement plus rapide.

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
)

Dans cet exemple, les fichiers Lottie sont automatiquement convertis en QML à l'aide de la fonction CMake ` qt_target_qml_from_lottie()`.

Ressources

Cet exemple contient des images vectorielles animées téléchargées à partir de la liste d’animations gratuites de Lottiefiles. Toutes les images sont soumises à la licence Lottie Simple License.

• « Icône d’empreinte digitale » par Solitudinem
• « Google Icons » par Jeffrey Christopher
• « Happy Star » par Natalia Świerz
• « Heartbeat | Medical » par Sarpreet Kalyan
• « Surprised Boy » par Hizen
• « Carte des États-Unis avec contours bleus » par Marina Trajkovska
• « User Interaction » par Mahendra Bhunwal
• « Interface utilisateur » par Bashir Ahmad
• « Authentification de l'utilisateur » par Musa Adanur

Exemple de projet sur code.qt.io