lottietoqml 예제

이 예제는 lottietoqml 도구를 사용하여 Lottie 파일을 QML로 변환한 후, 이를 애플리케이션에서 활용하는 방법을 보여줍니다.

개요

이 예제는 lottietoqml을 사용하여 변환된 9개의 벡터 애니메이션으로 구성되어 있습니다. 이 애니메이션들은 전체 화면 애플리케이션 창에서 격자 형태로 표시됩니다.

사용자가 애니메이션 이미지 중 하나를 클릭하면 화면 전체를 채우도록 확대됩니다. 이미지가 벡터 기반이므로 크기 조정 시 발생하는 아티팩트 없이 선명한 상태를 유지합니다.

lottietoqml은.SVG 파일에 대해 svgtoqml이 수행하는 작업과 유사한 기능을 수행합니다. 원본 벡터 이미지와 애니메이션을 가능한 한 많이 Qt Quick Shapes 및 기타 Qt Quick 구성 요소로 변환합니다. 그 결과, 애니메이션을 완전히 확장 가능하고 하드웨어 가속이 적용된 상태로 렌더링할 수 있습니다.

편의상, Lottie 파일은 VectorImage 컴포넌트를 통해 런타임에 로드할 수도 있습니다. 하지만 QML 파일을 미리 생성하는 것이 일반적으로 더 바람직합니다. 이렇게 하면 QML 씬을 사전 처리하여 더 빠르게 로드할 수 있기 때문입니다.

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
)

이 예제에서는 CMake 함수 qt_target_qml_from_lottie()를 사용하여 Lottie 파일을 자동으로 QML로 변환합니다.

자산

이 예제에는 Lottiefiles의 무료 애니메이션 목록에서 다운로드한 애니메이션 벡터 이미지가 포함되어 있습니다. 모든 이미지는 Lottie Simple License에 따라 라이선스가 부여됩니다.

• Solitudinem의 “Fingerprint icon”
• "Google Icons" by Jeffrey Christopher
• "Happy Star" by Natalia Świerz
• "Heartbeat | Medical" by Sarpreet Kalyan
• "Surprised Boy" by Hizen
• "파란색 윤곽선이 있는 미국 지도" by Marina Trajkovska
• "User Interaction" by Mahendra Bhunwal
• "사용자 인터페이스" by 바시르 아흐마드
• "사용자 인증" by Musa Adanur

code.qt.io의 예제 프로젝트