アニメーションを追加する

どのようにアニメーションを追加する

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に適用される。写真ビューアは、最初は画像をグリッドで表示し、画像がクリックされると、個々の画像が拡大され、画像編集のための新しいオプションを提示するためにインターフェイスが変更される詳細な状態に変更することができます。もう一方では、ボタンが押されると、押された状態に変化し、色と位置が変更され、ボタンが押されているように見えるかもしれません。

任意のコンポーネントは、関連するコンポーネントのプロパティを変更する一連の変更を適用するために、異なる状態の間で変更することができます。各状態は、例えば以下のような異なるコンフィギュレーションを提示することができます：

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

トランジションを使用することで、視覚的にアピールすることができます。トランジションは、状態の変化によるプロパティの変化を補間するアニメーションタイプです。

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

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

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

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

プロパティ値をデータバックエンドに接続し、タイムラインアニメーションを動かすことができます。データモデル、JavaScriptファイル、バックエンドサービスなど、様々なソースからデータをフェッチすることが出来ます。

これらのデータソースをTimelineの現在のフレームに接続し、バックエンドが現在のフレームのプロパティを変更した時にアニメーションを作成する事が出来ます。

例えば、バックエンドからのスピード値をクラスタのタコメーターダイヤルに接続することができます。バックエンドからスピード値が増減すると、タイムラインの端から端まで針のアニメーションが移動します。

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

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

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

Components >Default Components >Animation で利用可能なプリセット・アニメーション・コンポーネントのインスタンスを作成することで、プロパティのタイプと求める動作に応じたアニメーションを作成することができます。

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