タイムラインアニメーションの作成

タイムラインとキーフレームベースのアニメーションを作成すると、ターゲット値に即座に変更する代わりに、指定したキーフレームで中間値を通る線形補間を行うことができます。

また、タイムラインをスライダーなどのコンポーネントのプロパティ値にバインドして、アニメーションを制御することもできます。

タイムラインの追加

Timeline ビューのタイムラインとキーフレームベースのエディタを使用して、コンポーネントのプロパティをアニメーション化します。タイムラインを作成するまで、ビューは空です。

次のビデオは、Timeline で、コンポーネントのプロパティにキーフレームを挿入し、アニメートする方法を示しています：

タイムラインの作成

UIコンポーネントをアニメーションさせるタイムラインを作成するには、以下の手順に従います：

1. View >Views >Timeline に移動します。
2. (Add Timeline) を選択し、タイムラインの設定とアニメーションの実行を指定します。

   

3. で、Timeline Settings ：
   1. Timeline ID で、タイムラインを説明するIDを入力します。
   2. Start frame で、タイムラインの最初のフレームを設定します。負の値も可能です。
   3. End frame で、タイムラインの最後のフレームを設定します。
4. Animation Settings で、タイムラインの最後のフレームを設定します：
   1. Animation ID で、アニメーションの ID を入力します。
   2. Start frame で、アニメーションの最初のフレームを設定します。
   3. End frame で、アニメーションの最後のフレームを設定します。
   4. Duration で、アニメーションの長さをミリ秒単位で設定します。

   オプションのアニメーション設定の目的については、ツールチップを参照してください。

5. Close を選択してダイアログを閉じ、設定を保存します。

   

これで、アニメートするプロパティのキーフレームを設定できます。

キーフレーム値の設定

タイムラインを作成すると、Qt Quick Designer はタイムライン用に1つのアニメーションを作成します。一つのTimelineにいくつでもアニメーションを作成することができます。例えば、Timelineの一部分だけを動かすアニメーションや、Timelineを逆に動かすアニメーションを作成する事が出来ます。

Timeline ビューでコンポーネントをアニメーション化するには、アニメーション化するプロパティにキーフレーム値を設定します。 Qt Quick Designer は自動的に 2 つのキーフレームの間にキーフレームを追加し、それらの値を均等に設定して、例えば動きや変形を作成します。

コンポーネント プロパティにキーフレーム値を設定するには

1. Navigator ビューで、アニメートするコンポーネントを選択します。
2. Properties ビューで、アニメーションさせたいプロパティの (Actions) >Insert Keyframe を選択します。

   

3. Timeline ビューで、Per Property Recording ボタンを選択し、プロパティ変更の記録を開始する。

   

4. 再生ヘッドがフレーム 0 にあることを確認し、タイムラインのプロパティ名の横のフィールドにプロパティの値を入力します。Enterを選択して値を保存する。
5. 再生ヘッドをタイムラインの別のフレームに移動し、そのフレームで値を指定します。詳しくは、タイムラインの移動を参照してください。
6. 必要な数の値を指定したら、Per Property Recording を再度選択して録画を停止します。

ステートで使用するタイムラインを作成する

States ビューで追加したステートで使用するタイムラインを複数作成する事が出来ます。

2つ目の状態用のTimelineを作成するには、以下の手順に従います：

1. Timeline >Timeline Settings に行く。
2. 。
3. Animation Settings タブの下の表で、使いたい状態のタイムラインを設定する。

   

Timelineをプロパティにバインドする

Timelineをコンポーネントのプロパティにバインドすると、アニメーションの現在のフレームはプロパティの値によって制御されます。

この例では、TimelineをSliderコンポーネントにバインドしています。

タイムラインが作成され、キーフレーム値が設定された状態：

1. Components から、スライダーを2D またはNavigator ビューにドラッグします。
2. Navigator でスライダーを選択し、Properties でTo を 1000 に設定します。

   注意： スライダーで完全なアニメーションをコントロールしたい場合は、スライダーのFrom とTo の値が、タイムラインのStart Frame とEnd Frame の値と一致する必要があります。

3. Timeline Settings ダイアログで、Animation Settings タブの隣にある を選択し、アニメーションを削除します。複数のアニメーションがある場合は、すべて削除してください。
4. Expression binding に、slider.value と入力します。

   

アニメーションをステートにバインドする

アニメーションをステートにバインドして、ステートに入ったときに実行させる。

Timeline Settings ダイアログの下の表にある：

1. Timeline の値をダブルクリックし、アニメーションをステートにバインドしたいタイムラインを選択します。
2. Animation の値をダブルクリックし、ステートにバインドしたいアニメーションを選択します。

   

アニメーションを実行せずに、アニメーションの特定のキーフレームにステートをバインドするには、Fixed Frame でキーフレームを設定します。

キーフレームの管理

キーフレームの編集

プロパティに記録した変更をすべて削除するには、タイムライン上でプロパティ名を右クリックし、Remove Property を選択します。

再生ヘッドの現在位置にあるコンポーネントのキーフレームトラックにキーフレームを追加するには、タイムライン上でコンポーネント名を右クリックし、Add Keyframes at Current Frame を選択します。

キーフレームは、アクティブか非アクティブか、またはイージングカーブを適用したかどうかによって、異なる色と形のマーカーを使ってタイムライン上にマークされます。

キーフレーム値の編集

キーフレームの値を微調整するには、キーフレーム マーカーをダブルクリックするか、右クリックしてコンテキストメニューからEdit Keyframe を選択します。

Edit Keyframe ダイアログには、アニメートしているプロパティの名前と、Frame で指定したフレームでの現在の値が表示されます。 キーフレームとその値の両方を変更できます。

キーフレームをコピーする

あるコンポーネントのキーフレームトラックからキーフレームをコピーして、別のコンポーネントのキーフレームトラックに貼り付けることができます。

すべてのキーフレームをトラックから別のトラックにコピーするには、次の手順に従います：

1. コンポーネント ID を右クリックし、コンテキストメニューからCopy All Keyframes を選択します。
2. もう一方のコンポーネント ID を右クリックし、コンテキストメニューからPaste Keyframes を選択します。

キーフレームの削除

キーフレームを削除するには、キーフレームを右クリックし、コンテキストメニューからDelete Keyframe を選択します。

選択したコンポーネントからすべてのキーフレームを削除するには、Timeline のコンポーネント名を右クリックし、コンテキストメニューからDelete All Keyframes を選択します。

タイムラインをナビゲートする

以下の方法でタイムラインを移動することができます：

• 再生ヘッド (1) をフレームにドラッグします。
• ルーラー(2)をクリックして、フレームに移動します。
• Start Frame (Home),Previous Frame (,),NextFrame (.),End Frame (End) ボタン(3)を選択するか、キーボードショートカットを使用して、タイムラインの最初、前、次、または最後のフレームに移動します。
• 現在のキーフレームフィールド(4)にフレームの番号を入力すると、そのフレームに移動します。
• タイムライン上のプロパティ名の隣にあるPrevious とNext ボタンを選択して (5)、そのプロパティの前または次のキーフレームに移動する。

タイムラインをズームする

ツールバーのスライダーを使って、Timeline のズームレベルを設定する。 と ボタンを選択して、ビューをズームアウトまたはズームインします。

キーフレームトラックの色を設定する

キーフレームトラックの色を変更するには、コンテキストメニューからOverride Color を選択し、カラーピッカーで色を選択します。色をリセットするには、Reset Color を選択します。

アニメーションを見る

アニメーションをプレビューするには、Timeline のビューで次のいずれかを行います：

• 再生ヘッドをタイムラインに沿ってドラッグします。
• (Play) またはSpace を選択します。

UI 全体をプレビューするには、上部のツールバーから run ドロップダウンを選択し、Live Preview を選択するか、Alt+P を選択します。

回転のアニメート

中心点を中心に回転するコンポーネントをアニメートするには、Itemコンポーネントを回転コンポーネントの親として使用します。次に、アイテムのタイムラインを作成し、開始キーフレームと終了キーフレームに回転プロパティを設定します。

図形のアニメート

次の図形をアニメートするには Qt Quick Shapes Design Helpersを使用して、次のシェイプをアニメートできます：

• 楕円
• 矩形シェイプ
• 正多角形
• 星形