本稿は「Animated Vector Graphics in Qt 6.10」の抄訳です。
ここ数年、Qt Quick のベクターグラフィックス対応を着実に強化してきましたが、Qt 6.10 ではさらに新しく便利な機能がいくつか追加されています。本ブログの主な焦点は、Qt 6 既存コンポーネントに追加された「アニメーション対応ベクターグラフィックス」サポートです。
その前に少し振り返りましょう
今年初めに開催された Qt World Summit にて、Eirik Aavitsland 氏が素晴らしい講演で示したように、2D ベクターグラフィックスは Qt の創成期から基盤となってきました。ここ数年では、これをさらに強化するための継続的な取り組みが行われ、長年にわたって特定してきた不足部分を補う改良が進められています。その最初の大きなステップが Qt 6.6 で、Qt Quick Shapes に新しいレンダラーを追加し、GPU 上で曲線を美しくアンチエイリアス処理しながら直接描画できるようになりました。
これにより Qt Quick Shapes は大きく進化しました。QPainter のソフトウェアレンダラーと同等の描画品質が得られるようになり、どれだけ拡大しても画質が劣化しないようになったのです。
しかし、ここで示している Ghostscript のトラのような複雑な図形の場合、Qt Quick Shapes API 自体の使い勝手は依然としてやや不便でした。描画したい図形の情報を手作業で入力する必要があったのです。単純な図形やプログラムで生成する図形であればこの方法で問題ありませんが、複雑なアートワークでは非常に多くの作業が必要になります。
そこで Qt 6.8 では、VectorImage 型と、それに関連する svgtoqml ツールを導入しました。これにより、.svg ファイルを直接 Qt Quick や Qt Quick Shapes のコードへ変換できるようになりました。
そして Qt 6.10 では、これらのツールにさらに価値を加える改善を行っています。その大きなテーマのひとつが アニメーション対応ベクターグラフィックス です。これは .svg ファイルだけでなく、VectorImage が Lottie フォーマットもサポートするよう拡張されたことも含まれます。
SVG におけるアニメーションベクターグラフィックス
従来、Qt SVG モジュールは主に静的画像用として設計されており、ドキュメント上でもそう説明されていました。しかしドキュメントには記載されていなかったものの、実際には初期の頃から一部のアニメーションベクターグラフィックスをサポートしていました（具体的には、SVG の SMIL 形式で指定された変形や色のアニメーションです）。この機能は、古い Qt SVG のバージョンにおける「浮かぶ泡」の古典的なサンプルなどで使われていました。
SMIL は手書きでアニメーションを記述するには優れたフォーマットですが、SVG のアニメーション制作ツールは、アニメーションを作る際に CSSの keyframes ルールを使う傾向があります。そこで Qt 6.10 では、CSS keyframes を使って 変形、色、透明度 をアニメーションする SVG に対応しました。
このサポートは Qt SVG 内で実装されているため、QSvgRenderer などのコア API から利用できます。
ただし、アニメーションは頻繁な更新や再描画を必要とするため、複雑または大規模なアニメーションベクターグラフィックスでは Qt SVG の組み込みソフトウェアレンダラーでは負荷が高くなる場合があります。幸いにも、Qt 6.10 からは Qt SVG が解析したアニメーションが VectorImage および svgtoqml でもサポートされるようになりました。
Qt Quick に適用される際、SVG 内のアニメーションは Qt Quick のアニメーションコンポーネントに変換されます。ここでは Kishor A. 氏による「Colleague Animation」を例にデモを行っています（このアニメーションはもともと Lottie 形式でしたが、デモ用にアニメーション付き SVG に変換しています）。
Qt Quick でのレンダリングは ハードウェアアクセラレーションに対応しており、シーン内で実際に変更された部分だけを更新します（多くの場合、シェーダの uniform 変数の更新だけで済みます）。
そのため、この方法ではアニメーションを非常に効率的に再生でき、アプリケーションはフルフレームレートを維持したまま動作します。
Lottie によるアニメーションベクターグラフィックス
After Effects 用の Lottie フォーマットは、小規模な UI アニメーションを作成するための標準的なファイル形式のひとつで、特に Web 向けで広く利用されています。
しかし、Qt Lottie Animation モジュールが初めてリリースされて以来、フォーマット自体が進化を続けており、その結果 Qt Lottie Animation で忠実に再現できるアニメーションベクターファイルの割合は時間とともに減少していました。
Qt 6.10 では、この Lottie Animation モジュール自体に数多くの重要な改善が加えられました（例：プリコンポジションレイヤーの導入）。これにより、最新の Lottie ファイルのより広い範囲をサポートできるようになりました。
さらに、VectorImage に Lottie バックエンド（技術プレビュー）を追加しました。
アプリにプラグインを同梱し、assumeTrustedSource プロパティを true に設定することで、Lottie ファイルを .svg ファイルと同じ仕組みで描画できます。これにより、スケーラブルかつハードウェアアクセラレーション対応となり、従来の LottieAnimation タイプを使う場合よりも高いパフォーマンスを実現します。
Qt 6.10 には、Lottie ファイル用の QML を事前生成するツール lottietoqml が追加されました。これは svgtoqml の Lottie 版にあたり、こちらも技術プレビューとして提供されます。
新たに追加されたサンプルでは、lottietoqml で生成した QML ファイルをグリッド状に表示します。
任意の画像をクリックすると、そのアニメーションがウィンドウいっぱいに拡大されます。このとき、画質の劣化なくスケーリングでき、さらに GPU 上でアセットを再作成・再アップロードする必要がないことを確認できます。
今後の改善予定
Qtのベクターグラフィックスサポートをさらに充実させるため、まだまだ多くの改善項目が控えています。
まず、VectorImage の対応範囲を拡大し、マスクやフィルターといった高度なポストプロセス機能も含めたいと考えています。これらは SVG Tiny 1.2 の仕様には厳密には含まれていませんが、非常に有用なため Qt SVG ライブラリではすでにサポートしています。VectorImage にも同様のサポートを加えることは自然な次の一歩です。
また、SVGやLottieに存在するアニメーション可能なプロパティの中で、まだ Qt で対応していないものもあります。たとえば、曲線の個々の制御点をアニメーションさせる機能は強力ですが、Qtでの完全対応はまだ先の課題です。
もちろん、私たちはより実用的な機能開発を目指しているため、利用頻度の高い機能を優先的に取り組むよう努めています。具体的には、入手可能なアニメーションベクターグラフィックスファイルを分析し、依存している未対応機能を洗い出すといった作業を行っています。
とはいえ、実際の利用ケースに勝るものはありません。もし現在 Qt で期待どおり動作しない SVG や Lottie ファイルをお持ちでしたら、ぜひご提案をお寄せください。Bluesky 上で詳細を教えていただければ、適切なチャンネルへお伝えします。
新しい Qt 6.10 の機能が、皆さまのカラフルで鮮やかなアプリケーション開発の刺激となれば幸いです。今後も Qt を、2D・3D問わず美しいUIグラフィックスを作るためのハイエンドアプリケーション開発の主要フレームワークとして強化していきます。
