Qt Quickの重要なコンセプト - ステート、トランジション、アニメーション

最新のユーザーインターフェースでは、状態間の遷移とユーザーインターフェースのアニメーションは非常に有益です。これらはQt Quickの第一級の概念です。

このページでは、状態、状態遷移、プロパティのアニメーションについて説明します。どの概念が重要で、なぜ重要なのか、そしてそれらの概念がどのように相互に関係しているのかについて詳しく説明します。また、これらの概念を実装するためにQt Quickが提供するQML型の詳細へのリンクも提供しています。

状態

特定のビジュアルアイテムの状態とは、ビジュアルアイテムの各構成要素がその中でどのように、どこに表示されるか、そしてその状態に関連するすべてのデータを記述する情報の集合です。ユーザーインターフェースのほとんどのビジュアルアイテムは、それぞれ明確に定義されたプロパティを持つ、限られた数の状態を持ちます。

例えば、リスト内の要素は、選択されているか、選択されていないか、選択されている場合は、現在アクティブな単一の選択であるか、選択グループの一部であるかのいずれかです。

これらの状態には、それぞれ関連する視覚的な外観（ニュートラル、ハイライト、展開など）があります。

Qt Quick は、State 型を提供し、そのプロパティを用いてセマンティクスを定義し、動作やアニメーションをトリガーすることができます。詳細については、Qt Quick Stateのドキュメントを参照してください。

遷移

ビジュアルアイテムがある状態から別の状態に遷移すると、そのアイテムの外観が変わります。トランジションは、2つの状態の間の「エッジ」です。アプリケーションの他の部分が、ある状態に入ったり出たりしたときにトリガーされる動作を持っている可能性があるためです。

Qt Quickは、アプリケーションがある状態から別の状態に変化するときに発生することを定義するプロパティを持つTransition 。遷移の詳細については、状態遷移のドキュメントを参照してください。

アニメーション

状態遷移の際に、流動的なアニメーションを使用することができます。ビジュアル・キャンバスの突然の予期せぬ変更は、ユーザー・エクスペリエンスを低下させるので避けるべきです。

リスト内の要素が選択された場合、（ニュートラルからハイライトへの）色の変化をアニメーションにすることができます。リスト内の要素の位置が変更された場合、ユーザーの視線が変化を追跡できるように、流れるようなアニメーションで移動させることができます。

このようなアニメーションは、Qt Quick では様々なアニメーションとトランジションタイプでサポートされています。これらのタイプと使用方法については、「Qt Quickにおけるアニメーションとトランジション」のドキュメントを参照してください。

プロパティの割り当てのアニメーション

アニメーションは、状態や状態間の遷移に関連するだけではありません。例えば、アニメーションは他のイベントによってトリガーされるかもしれません。

ビジュアルアイテムの特定のプロパティの変化を、その変化の原因（例えば、不透明度の効果）に関係なく、常にアニメーション化することは、しばしば有益です。Qt Quickは、Behavior 型を提供し、クライアントがプロパティに対する変更のアニメーション動作を指定できるようにしています。Behavior タイプはQMLオブジェクトのプロパティ修飾子の一例です。

Behavior 型を使用したデフォルトのプロパティ変更アニメーションについては、デフォルトのプロパティアニメーションについてのドキュメントを参照してください。

注意すべき点として、デフォルトのプロパティアニメーション（Behavior 型を使用）と状態遷移アニメーションを併用すると、時として未定義の動作が発生することがあります。このトピックの詳細については、Qt Quick Behaviors with State を参照してください。

アニメーター

Animator タイプは特殊なアニメーションで、QML オブジェクトをバイパスし、シーングラフのプリミティブを直接操作します。アニメーターベースのアニメーションは、シーングラフのレンダリングスレッドで実行することができます。

Qt Quick には以下の Animator タイプがあります：

• XAnimator - の水平位置をアニメーション化します。Item
• YAnimator - の垂直位置をアニメーション化します。Item
• ScaleAnimator - のスケールファクターをアニメーション化します。Item
• RotationAnimator - の回転をアニメーション化します。Item
• OpacityAnimator - の不透明度をアニメーション化します。Item
• UniformAnimator - のユニフォームをアニメーション化する .ShaderEffect

アニメーションスプライト

アニメーションスプライトの概念は、このページで使われているアニメーションの概念とは別のものです。アニメーションする画像やスプライトを作成したり使用したい場合は、スプライトのアニメーションに関するドキュメントを参照してください。