lottietoqmlの使用例

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

概要

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

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

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

便利なことに、LottieファイルはVectorImage コンポーネントを通してランタイムに読み込むこともできます。しかし、QMLファイルを事前に生成しておく方が、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