アニメーションの追加

手順：アニメーションの追加

Qt Quick Designerでは、さまざまな目的に適した以下の種類のアニメーション手法をサポートしています：

• 2D向けの一般的なモーションデザイン手法
• 状態間のアニメーション
• データ駆動型のUIロジックアニメーション

一般的なモーションデザイン手法

以下の表は、2Dにおける一般的なモーションデザイン技法とその代表的な使用例をまとめたものです。

タイムラインおよびキーフレームベースのアニメーション

タイムラインアニメーションはキーフレームに基づいています。Qt Quick Designerでは、キーフレームによって特定の時点におけるコンポーネントのプロパティ値が決定されます。プロパティをアニメーション化することで、値が目標値に即座に変化するのではなく、中間値を経由して変化させることができます。

たとえば、長方形の y 座標プロパティを、アニメーションの開始時に 0、終了時に 100 に設定できます。 アニメーションが実行されると、矩形は Y 軸上で位置 0 から 100 へと移動します。デフォルトではキーフレームは線形補間されるため、アニメーションの途中では Y プロパティの値は 50 になります。

イージングカーブ

直線的な動きではなく、アニメーションの開始時には速く、終了時にはゆっくりと長方形を動かしたい場合があります。この効果を実現するには、開始フレームと終了フレームの間に多数のキーフレームを挿入する必要があります。この手間を省くために、キーフレーム間の非線形補間を行うイージングカーブを指定することができます。 イージングカーブを使用すると、コンポーネントが加速したり、減速したり、アニメーションの終了時に跳ね返ったりするように見せることができます。

アニメーションカーブ

イージングカーブは、ほとんどの単純なUIアニメーションではうまく機能しますが、より複雑なアニメーションでは複数のキーフレームが必要になるため、キーフレームの値と補間を同時に可視化することが必要になります。 「Curves 」ビューでは、プロパティのアニメーション全体を一度に視覚化し、キーフレームの有効な値とキーフレーム間の補間を併せて表示します。また、異なるプロパティのアニメーションを同時に表示することもできるため、x 位置のアニメーションと y 位置のアニメーションを並べて確認することができます。

状態間のアニメーション

UIの状態間を移動するには、キーフレームに基づくトランジションタイムラインを使用して、UIの異なる状態間のトランジションを適用します。キーフレームにはイージングカーブを適用できます。

状態間の遷移

UIは、さまざまなシナリオに応じて異なるUI構成を表示したり、ユーザーの操作に応じて外観を変更したりするように設計されています。多くの場合、複数の変更が同時に実行されるため、UIが内部的にある状態から別の状態へと変化している様子が視覚的に確認できます。

これは、UIの複雑さにかかわらず、一般的に当てはまります。例えば、写真ビューアでは、最初は画像をグリッド形式で表示し、画像がクリックされると、個々の画像が拡大され、画像編集のための新しいオプションを表示するようにインターフェースが変更される「詳細表示」状態に切り替わります。 その反対の例として、ボタンが押されると、押下状態に切り替わり、色や位置が変更されて、押されているように見える場合があります。

どのコンポーネントも、関連するコンポーネントのプロパティを変更する一連の変更を適用するために、異なる状態間で切り替えることができます。各状態は異なる構成を示すことができ、例えば次のような動作が可能です：

• 一部の UI コンポーネントを表示し、他のコンポーネントを非表示にする。
• ユーザーに利用可能な異なるアクションを表示する。
• アニメーションを開始、停止、または一時停止する。
• 新しい状態で必要となるスクリプトを実行する。
• 特定のコンポーネントのプロパティ値を変更する。
• 別のビューを表示します。

状態の変化は急激な動きをもたらしますが、トランジションを使用することで視覚的に魅力的な動きにすることができます。トランジションとは、状態の変化によって生じるプロパティの変化を補間するアニメーションの一種です。

Transitions ビューでは、各プロパティのトランジションの開始フレーム、終了フレーム、および継続時間を設定できます。また、各アニメーションのイージングカーブや、トランジション全体の最大継続時間も設定できます。

データ駆動型の UI ロジックアニメーション

次の表は、バックエンドからの実際のデータまたはモックデータを使用して UI ロジックをアニメーション化するテクニックをまとめたものです。

データ駆動型タイムラインアニメーション

プロパティ値をデータバックエンドに接続して、タイムラインアニメーションを駆動できます。データモデル、JavaScriptファイル、バックエンドサービスなど、さまざまなソースからデータを取得できます。

これらのデータソースをタイムラインの現在のフレームに接続し、バックエンドが現在のフレームのプロパティを変更した際にアニメーションを生成できます。

たとえば、バックエンドの速度値をクラスター内のタコメーターの文字盤に接続することができます。バックエンドから速度値が増減すると、針のアニメーションがタイムラインの一方の端からもう一方の端へと移動します。

プログラムによるアニメーション

プロパティアニメーションは、プログラムで制御できます。プロパティアニメーションは、Animation コンポーネントをコンポーネントインスタンスのプロパティ値にバインドし、時間の経過とともにプロパティ値を徐々に変化させることで作成されます。プロパティアニメーションは、プロパティ値の変化間の値を補間することで滑らかな動きを実現します。また、タイミング制御機能を提供し、イージングカーブを通じてさまざまな補間効果を適用できます。

開発者は、start() 、stop() 、resume() 、pause() 、restart() 、およびcomplete() 関数を使用して、プロパティアニメーションの実行を制御できます。

「Components 」>「Default Components 」>「Animation 」で利用可能なプリセットアニメーションコンポーネントのインスタンスを作成し、プロパティのタイプや希望する動作に応じてアニメーションを作成できます。

Animation のコンポーネントとそのプロパティに関する詳細については、「プロパティの変更をアニメーション化する」を参照してください。