한국어
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 30658
146 Qt 응용프로그램에서 PDF 문서 렌더링 file makersweb 2021.09.23 5
145 QML에서 Websocket 서버와 통신 updatefile makersweb 2021.09.18 9
144 QML 코딩 규칙 makersweb 2021.09.05 104
143 QML 에서 QR코드 생성 file makersweb 2021.08.20 80
142 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 makersweb 2021.08.08 35
» Qt 응용프로그램에서 Lottie Animation사용 file makersweb 2021.05.30 245
140 싱글 샷(Single-Shot) 시그널/슬롯 연결 makersweb 2021.05.12 172
139 응용프로그램 자동실행 설정 (on Windows) makersweb 2021.05.08 156
138 Qt 6 에서 프로퍼티 바인딩 makersweb 2021.04.03 234
137 QML과 JavaScript 의 숫자 관련 내장된 함수 makersweb 2021.03.28 137
136 Qt 5 코드를 Qt 6로 포팅하기 위해 도움이 되는 Clazy Framework file makersweb 2021.03.01 265
135 C++로 작성한 클래스를 QML에서 생성 file makersweb 2021.02.10 903
134 Qt MQTT의 pus/sub 튜토리얼 file makersweb 2021.02.06 407
133 Qt 를 사용하거나 기반으로 하는 응용프로그램 file makersweb 2021.01.30 932
132 Loader를 사용하여 동적으로 QML 로드 makersweb 2021.01.19 455
131 QThread 및 QMutex 예제 makersweb 2021.01.12 357
130 그래픽 소프트웨어에서 디자인 내보내기 (Exporting Designs from Graphics Software) j2doll 2020.12.25 164
129 Qt5Compat 라이브러리를 사용하여 Qt5에서 Qt6로 포팅 [2] makersweb 2020.12.05 288
128 Qt Quick Controls 2에 네이티브 데스크탑 스타일 추가 file makersweb 2020.11.23 205
127 QML 바인딩 끊김 진단 makersweb 2020.11.08 304