Ejemplo de lottietoqml

Este ejemplo muestra cómo se puede utilizar la herramienta lottietoqml para convertir archivos Lottie en QML y luego utilizarlos en una aplicación.

Resumen

El ejemplo consiste en nueve animaciones vectoriales que han sido convertidas utilizando lottietoqml. Se muestran en una cuadrícula en una ventana de aplicación a pantalla completa.

Si el usuario hace clic en una de las imágenes animadas, ésta se ampliará hasta ocupar toda la pantalla. Dado que la imagen está basada en vectores, permanecerá nítida sin artefactos de escalado.

El lottietoqml hace lo equivalente a lo que svgtoqml hace para los archivos .SVG. Convierte la mayor parte posible de la imagen vectorial original y la animación a Qt Quick Shapes y otros componentes Qt Quick componentes. El resultado es un renderizado de la animación totalmente escalable y acelerado por hardware.

Para mayor comodidad, los archivos Lottie también pueden cargarse en tiempo de ejecución a través del componente VectorImage. Sin embargo, suele ser preferible pregenerar el archivo QML, ya que esto permite preprocesar la escena QML para una carga más rápida.

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
)

En este ejemplo, los archivos Lottie se convierten automáticamente a QML utilizando la función CMake qt_target_qml_from_lottie().

Activos

Este ejemplo contiene imágenes vectoriales animadas descargadas de la lista de animaciones gratuitas Lottiefiles. Todas las imágenes tienen licencia Lottie Simple License.

• "Icono de huella dactilar" por Solitudinem
• "Iconos de Google" por Jeffrey Christopher
• "Estrella feliz" por Natalia Świerz
• "Heartbeat | Medical" por Sarpreet Kalyan
• "Niño sorprendido" by Hizen
• "Mapa de EE.UU. con contornos azules" de Marina Trajkovska
• "Interacción con el usuario" de Mahendra Bhunwal
• "Interfaz de usuario" de Bashir Ahmad
• "Autenticación de usuario" por Musa Adanur

Proyecto de ejemplo @ code.qt.io