한국어
Qt
 

Lottie는 Airbnb에서 오픈소스 라이선스로 개발한 작고 고품질의 런타임에 조작 할 수있는 벡터 기반 그래픽 파일 형식이다. JSON 형식 파일로 만들어지며 PNG 및 GIF 대비 최대 600% 작은 파일 크기, 스크립팅 가능한 대화 형 형식이라고 소개하고 있다.

lottie.png

UI 디자이너가 Adobe After Effects 에서 작업한 애니메이션을 Bodymovin 플러그인을 사용하여 JSON 형식으로 내보낼 수 있는데 이러한 JSON 파일을위한 기본 iOS 및 Android 런타임 라이브러리가 있다. 이를 통해 BodyMovin JSON 파일을 포함하고 재생할 수 있다. iOS나 안드로이드 기기를 가지고 있다면 어딘가에 로티를 사용하는 앱이 있을 것이다.

 

Qt Lottie Animation은 BodyMovin JSON 형식으로 내 보낸 그래픽 및 애니메이션을 렌더링하기위한 QML API를 제공한다. 이를 통해 Adobe After Effect 애니메이션을 QtQuick 애플리케이션에 직접 포함 할 수 있다. (계발 단계에 있으므로 모든 기능이 완벽하지 않을 수 있다.)

installer.png

 

Qt 내부적으로 BodyMovin JSON 파일은 임베디드 렌더러 (원하는 경우 마이크로 렌더러)에서 렌더링된다. JSON을 구문 분석하고 로드 한 다음 애니메이션, 트리밍, 레이어 및 기타 효과를 실행한다. 이것은 다른 QtQuick 요소와 마찬가지로 UI의 QML 코드로 제어 할 수있는 LottieAnimation QML 타입에 래핑되어 있다.

 

Qt Lottie를 사용하는 것은 다른 QtQuick 요소만큼 간단하다. QML 파일에 요소를 추가하고 프로퍼티를 지정하고 필요한 경우 JavaScript를 사용하여 동작을 제어(play, pause, stop등)할 수 있다. 다음은 간단한 사용 예제이다.

import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.lottieqt 1.0

Window{
    visible: true
    width: 640
    height: 480
    title: "Hello, QtLottie"

    LottieAnimation {
        id: lottieAni
        anchors.centerIn: parent
        scale: 1
        loops: LottieAnimation.Infinite
        quality: LottieAnimation.MediumQuality
        source: ":/TouchID.json"
        autoPlay: false
        onStatusChanged: {
            if (status === LottieAnimation.Ready) {
                // any acvities needed before
                // playing starts go here
                gotoAndPlay(startFrame);
            }
        }
        onFinished: {
            console.log("Finished playing")
        }
    }
}

 

실행 결과:

lottieAnimation.gif

 

Qt Lottie Animation 은 Qt 5.13 이상 에서 사용할 수 있다. 애니메이션이 없는 경우 lottiefiles.com 에서 수천 개의 무료 Lottie 애니메이션을 구 할 수 있다.

 

참고 문서: https://doc.qt.io/qt-5/qml-qt-labs-lottieqt-lottieanimation.html

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 35055
151 Qt Android 앱에 AdMob 배너달기 file makersweb 2021.12.04 88
150 Qt 6의 C++ 프로퍼티 바인딩 예제 makersweb 2021.11.01 169
149 QML에서 앵커(anchors)로 위치 지정 file makersweb 2021.10.05 347
148 안드로이드용 Qt 6.2 makersweb 2021.10.02 137
147 Qt 응용프로그램에서 PDF 문서 렌더링 file makersweb 2021.09.23 113
146 QML에서 Websocket 서버와 통신 file makersweb 2021.09.18 121
145 QML 코딩 규칙 makersweb 2021.09.05 613
144 QML 에서 QR코드 생성 file makersweb 2021.08.20 231
143 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 makersweb 2021.08.08 112
» Qt 응용프로그램에서 Lottie Animation사용 file makersweb 2021.05.30 375
141 싱글 샷(Single-Shot) 시그널/슬롯 연결 makersweb 2021.05.12 267
140 응용프로그램 자동실행 설정 (on Windows) makersweb 2021.05.08 228
139 Qt 6 에서 프로퍼티 바인딩 makersweb 2021.04.03 345
138 QML과 JavaScript 의 숫자 관련 내장된 함수 makersweb 2021.03.28 297
137 Qt 5 코드를 Qt 6로 포팅하기 위해 도움이 되는 Clazy Framework file makersweb 2021.03.01 360
136 C++로 작성한 클래스를 QML에서 생성 file makersweb 2021.02.10 1424
135 Qt MQTT의 pus/sub 튜토리얼 file makersweb 2021.02.06 616
134 Qt 를 사용하거나 기반으로 하는 응용프로그램 file makersweb 2021.01.30 1355
133 Loader를 사용하여 동적으로 QML 로드 makersweb 2021.01.19 606
132 QThread 및 QMutex 예제 makersweb 2021.01.12 523