lottietoqmlの使用例

この例では、lottietoqmlツールを使ってLottieファイルをQMLに変換し、それをアプリケーションで使う方法を示します。

概要

この例は、lottietoqmlを使って変換された9つのベクターアニメーションから構成されています。これらは、フルスクリーンのアプリケーションウィンドウにグリッド状に表示されます。

ユーザーがアニメーションの1つをクリックすると、画面いっぱいに拡大されます。画像はベクターベースなので、拡大縮小のアーチファクトもなく、鮮明なままです。

lottietoqmlは、svgtoqmlが.SVGファイルに対して行うのと同等のことを行います。元のベクター画像とアニメーションを可能な限り Qt Quick Shapesと他の Qt Quickコンポーネントに変換します。その結果、完全にスケーラブルでハードウェアアクセラレーションによるアニメーションのレンダリングが可能になります。

便利なことに、LottieファイルはVectorImage コンポーネントを通してランタイムに読み込むこともできます。なぜなら、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でライセンスされています。

• 「指紋アイコン" by Solitudinem
• 「Google Icons" by Jeffrey Christopher
• "Happy Star" by Natalia Świerz
• 「ハートビート｜メディカル" by Sarpreet Kalyan
• 「驚きの少年" by Hizen
• 「青でアウトラインのあるアメリカ地図" by Marina Trajkovska
• 「ユーザー インタラクション」 by Mahendra Bhunwal
• 「ユーザーインターフェース by Bashir Ahmad
• 「ユーザー認証" by Musa Adanur

プロジェクト例 @ code.qt.io