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

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

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

タイムラインの追加

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 つのアニメーションを作成します。1 つのタイムラインに対して、必要なだけアニメーションを作成できます。たとえば、タイムラインのごく一部のみを実行するアニメーションや、タイムラインを逆再生するアニメーションを作成することができます。

「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 つ目の状態用のタイムラインを作成するには：

1. 「Timeline 」>「Timeline Settings 」に移動します。
2. 「 」を選択して、別のタイムラインを作成します。
3. 「Animation Settings 」タブの下にあるテーブルで、タイムラインを使用したい状態のタイムラインを設定します。

   

タイムラインをプロパティにバインドする

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

この例では、タイムラインをスライダーコンポーネントにバインドします。

タイムラインを作成し、キーフレームの値を設定したら：

1. 「Components 」から、スライダーを「2D 」または「Navigator 」ビューにドラッグします。
2. Navigator で「slider」を選択し、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 」）またはスペースキーを選択します。

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

回転のアニメーション化

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

図形のアニメーション

以下の図形にアニメーションを適用するには、 Qt Quick Shapes Design Helpers を使用して、以下の図形にアニメーションを適用できます：

• EllipseShape
• RectangleShape
• RegularPolygonShape
• StarShape