lottietoqml の例

この例では、lottietoqmlツールを使用して Lottie ファイルを QML に変換し、それをアプリケーションで利用する方法について解説します。

概要

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

ユーザーがアニメーション画像のいずれかをクリックすると、画面いっぱいに拡大表示されます。画像はベクターベースであるため、スケーリングによるアーティファクトが生じることなく、鮮明な状態が保たれます。

lottietoqmlは、svgtoqml が.SVG ファイルに対して行うのと同様の処理を行います。元のベクター画像とアニメーションを可能な限り 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の下でライセンスされています。

• 「Fingerprint icon」 by Solitudinem
• 「Google Icons」：Jeffrey Christopher
• 「Happy Star」：Natalia Świerz
• 「Heartbeat | Medical」：Sarpreet Kalyan
• 「Surprised Boy」：Hizen
• 「青色の輪郭線付き米国地図」：Marina Trajkovska
• 「User Interaction」 by マヘンドラ・ブーンワル
• 「ユーザーインターフェース」 バシール・アフマド
• 「ユーザー認証」 by Musa Adanur

code.qt.io のサンプルプロジェクト