한국어
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 64330
156 단일 인스턴스 Qt 응용 프로그램(Single-instance Application) makersweb 2022.06.23 19
155 Qt로 작성된 iOS 앱에서 시리얼 통신 file makersweb 2022.04.30 164
154 VirtualKeyboard 스타일 커스터 마이징 makersweb 2022.03.13 192
153 성능 고려 및 제안 사항 makersweb 2022.03.07 157
152 Binding 타입으로 객체 속성 간 묶기 makersweb 2022.03.04 118
151 Qt Bluetooth Low Energy 개요 makersweb 2022.02.13 208
150 Qt Android 앱에 AdMob 배너달기 file makersweb 2021.12.04 201
149 Qt 6의 C++ 프로퍼티 바인딩 예제 makersweb 2021.11.01 394
148 QML에서 앵커(anchors)로 위치 지정 file makersweb 2021.10.05 902
147 안드로이드용 Qt 6.2 makersweb 2021.10.02 264
146 Qt 응용프로그램에서 PDF 문서 렌더링 file makersweb 2021.09.23 222
145 QML에서 Websocket 서버와 통신 file makersweb 2021.09.18 283
144 QML 코딩 규칙 makersweb 2021.09.05 1235
143 QML 에서 QR코드 생성 file makersweb 2021.08.20 413
142 앱을 종료할 때 QML 바인딩 오류를 피하는 방법 makersweb 2021.08.08 244
» Qt 응용프로그램에서 Lottie Animation사용 file makersweb 2021.05.30 533
140 싱글 샷(Single-Shot) 시그널/슬롯 연결 makersweb 2021.05.12 379
139 응용프로그램 자동실행 설정 (on Windows) makersweb 2021.05.08 329
138 Qt 6 에서 프로퍼티 바인딩 makersweb 2021.04.03 476
137 QML과 JavaScript 의 숫자 관련 내장된 함수 makersweb 2021.03.28 540