qtlottieviewer の例

このサンプルでは、Qt.labs.lottieqt モジュールを使用して、Qt Quick アプリケーション内でLottieアニメーションベクターグラフィックスファイルを直接表示・制御する方法を示しています。

ここでは、2つの異なるアプローチを紹介します：

1. VectorImage の使用LottieVectorImageController
2. 以下の方法LottieAnimation

概要

サンプルウィンドウの上部には、VectorImage プレーヤーとLottieAnimation プレーヤーを切り替えるためのタブバーがあります。ウィンドウのメイン部分は、選択された Lottie ファイルプレーヤーを含む Rectangle で、Lottie アニメーションが表示されています。

その下には一列のコントロールが配置されています。ユーザーは「フレームレート」スライダーでアニメーションの速度を調整し、「スケール」スライダーで拡大・縮小を行うことができます。アニメーションは「再生/一時停止」ボタンで停止および再開できます。一時停止中は、「フレーム移動」スライダーを使用して、表示するフレームを正確に指定することができます。 「開く」ボタンをクリックするとファイルダイアログが表示され、ユーザーは読み込んで表示するLottieファイルを選択できます。

LottieAnimation これはQQuickPaintedItem であり、ベクターグラフィックスのソフトウェアラスタライズを採用しています。VectorImage は、ベクターグラフィックスファイルを、ハードウェアGPUレンダリングを利用する Qt Quick Shapes モジュールを活用するQMLコンポーネントに変換します。このモジュールは、ハードウェアGPUレンダリングを採用しています。xml-ph-0001@deepl.internal

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