Exemple de lottietoqml

Cet exemple montre comment l'outil lottietoqml peut être utilisé pour convertir des fichiers Lottie en QML et les utiliser ensuite dans une application.

Vue d'ensemble

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

Si l'utilisateur clique sur l'une des images animées, celle-ci s'agrandit pour remplir l'écran. Comme l'image est vectorielle, elle restera nette sans aucun artefact de mise à l'échelle.

Le lottietoqml fait l'équivalent de ce que fait svgtoqml pour les fichiers .SVG. Il convertit autant que possible l'image vectorielle originale et l'animation en Qt Quick Shapes et d'autres composants Qt Quick composants. Le résultat est un rendu de l'animation entièrement modulable et accéléré par le matériel.

Pour plus de commodité, les fichiers Lottie peuvent également être chargés au moment de l'exécution par l'intermédiaire du composant VectorImage. Toutefois, 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().

Actifs

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

• "Icône d'empreinte digitale" par Solitudinem
• "Icônes Google" de Jeffrey Christopher
• "Happy Star" de Natalia Świerz
• "Heartbeat | Medical" de Sarpreet Kalyan
• "Garçon surpris" de Hizen
• "Carte des États-Unis avec des contours bleus par Marina Trajkovska
• "Interaction avec l'utilisateur" par Mahendra Bhunwal
• "Interface utilisateur" par Bashir Ahmad
• "Authentification de l'utilisateur" par Musa Adanur

Exemple de projet @ code.qt.io