Qt Quick における重要な概念 - ステート、トランジション、アニメーション

どのようなモダンなユーザーインターフェースにおいても、状態間の遷移とユーザーインターフェースのアニメーションは非常に有益です。これらはQt Quick の第一級の概念です。

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

状態

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

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

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

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

遷移

ビジュアルアイテムがある状態から別の状態に遷移すると、そのアイテムの外観が変わります。トランジションは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

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

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