ストーリーボードの概要

この概要では、Windows アニメーションでの画面切り替えとストーリーボードの使用方法に焦点を当てています。 Windows アニメーションのコンポーネントの概要については、「Windows アニメーションの 概要」を参照してください。

このトピックは、次のセクションで構成されています。

• Transitions
  • 画面切り替えライブラリ
  • カスタム画面切り替え
• ストーリーボード
  • シンプルなストーリーボードの構築
  • Context-Sensitive期間の使用
  • より複雑なストーリーボードの構築
  • キーフレームの使用
  • 変数の保持
  • ストーリーボードのスケジュール設定
• 関連トピック

Transitions

遷移は、特定の時間間隔で 1 つのアニメーション変数がどのように変化するかを定義します。 Windows アニメーションには、開発者が 1 つ以上のアニメーション変数に適用できる一般的な遷移のライブラリが含まれています。 遷移の種類によってパラメーターのセットが異なります。これには、遷移の完了時の変数の値、遷移の継続時間、または加速度や振動の範囲など、基になる数学関数に固有の数量が含まれる場合があります。

すべての遷移は、数学関数の初期値と初期速度 (傾き) という 2 つの暗黙的なパラメーターを共有します。 これらはアプリケーションによって明示的に指定できますが、通常はアニメーション マネージャーによって、遷移の開始時にアニメーション変数の値と速度に設定されます。

• 画面切り替えライブラリ
• カスタム画面切り替え

画面切り替えライブラリ

現在、切り替えライブラリでは、次の遷移が提供されています。 アプリケーションで切り替えライブラリを使用して指定できない効果が必要な場合、開発者は、アプリケーションのカスタム補間機能を実装するか、サード パーティの移行ライブラリを使用して、他の種類の遷移を作成できます。

切り替え名	Description
accelerate-decelerate	アニメーション変数の速度が上がり、指定された期間にわたって速度が低下します。
定数 (constant)	アニメーション変数は、画面切り替え中も初期値のままです。
3 次	アニメーション変数は、その初期値から、指定された期間にわたって、指定された最終速度を持つ指定された最終値に変更されます。
離散	アニメーション変数は、指定した遅延時間の初期値のままで、指定された最終値に瞬時に切り替え、特定のホールド時間の値のままです。
瞬時	アニメーション変数は、現在の値から指定した最終値に即座に変更されます。
linear	アニメーション変数は、指定された期間にわたって、初期値から指定された最終値に線形的に遷移します。
速度からの線形	アニメーション変数は、初期値から指定した速度で指定された最終値に線形に遷移します。
加速からの放物線	アニメーション変数は、初期値から指定した最終値に遷移し、指定した最終速度で、指定した加速度で速度を変更します。
反転	変数は、特定の期間にわたって方向を変更します。 最終的な値は初期値と同じになり、最終的なベロシティは初期速度の負の値になります。
範囲からの正弦波	変数は、指定された値の範囲内で、特定の期間にわたって、指定した振動期間で振動します。
速度からの正弦波	変数は、特定の期間にわたって、指定された振動期間で振動します。 振動の振幅は変数の初期速度によって決まります。
スムーズストップ	アニメーション変数は、指定された最終値で、最大時間内にスムーズに停止します。

次の表に、これらの各画面切り替えの図を示します。

図
速度図からのの遷移
遷移の遷移のイラスト
からの

カスタム画面切り替え

補間関数は、アニメーション変数が初期値から最終的な値に進むにつれて時間の経過とともにどのように変化するかを決定する数学関数を定義します。 遷移ライブラリ内の各遷移には、システムによって提供され、補間関数を実装する補間オブジェクトが関連付けられています。 アプリケーションで遷移ライブラリを使用して指定できない効果が必要な場合は、新しい遷移ごとに補間オブジェクトを実装することで、1 つ以上のカスタム遷移を実装できます。 補間オブジェクトは、アプリケーションで直接使用することはできません。代わりに、関連付けられた遷移でラップする必要があります。 遷移ファクトリは、補間オブジェクトから遷移を生成するために使用されます。 詳細については、「 IUIAnimationInterpolator 」と 「IUIAnimationTransitionFactory 」を参照してください。

ほとんどのアプリケーションには、切り替えライブラリを使用して必要なすべての遷移があるため、補間を実装する必要はありません。

ストーリーボード

ストーリーボードは、時間の経過と同時に 1 つ以上のアニメーション変数に適用される遷移のコレクションです。 ストーリーボード内の遷移は、相互に相対的に同期されたままであることが保証され、ストーリーボードは 1 つのユニットとしてスケジュールまたは取り消されます。 目的の画面切り替えを作成した後、アプリケーションはアニメーション マネージャーを使用してストーリーボードを作成し、ストーリーボードに切り替えを追加し、ストーリーボードを適切に構成し、できるだけ早く再生するようにスケジュールします。 アニメーション マネージャーは、現在同じ変数をアニメーション化している他のストーリーボードとの競合が発生する可能性があるため、ストーリーボードの実際の開始時刻を決定します。

ストーリーボードの全体的な期間は、ストーリーボード内の遷移の期間によって異なります。 切り替えの期間を固定する必要はありません。これは、遷移の開始時にアニメーション化された変数の値と速度によって決定できます。 そのため、ストーリーボードの期間は、アニメーション化する変数の状態によっても異なります。

次の例では、アニメーション マネージャー、切り替えライブラリ、タイマーが作成されていることを前提としています。 詳細については、「 メイン アニメーション オブジェクトを作成する」を参照してください。 また、この例では、 IUIAnimationManager::CreateAnimationVariable メソッドを使用して 3 つのアニメーション変数 (X、Y、Z) を作成し、 IUIAnimationTransitionLibrary インターフェイスのいずれかのメソッドを使用して 5 つの遷移 (T1、T2、T3、T4、T5) を作成したとします。

• シンプルなストーリーボードの構築
• Context-Sensitive期間の使用
• より複雑なストーリーボードの構築
• キーフレームの使用
• 変数の保持
• ストーリーボードのスケジュール設定

シンプルなストーリーボードの構築

単純なストーリーボードを構築するには、 IUIAnimationManager::CreateStoryboard メソッドを使用して新しいストーリーボードを作成し、 IUIAnimationTransitionLibrary::CreateLinearTransition メソッドを使用して線形遷移 T1 と IUIAnimationStoryboard::AddTransition メソッドを作成し、T1 遷移を変数 X に適用し、結果の遷移をストーリーボードに追加します。

このプロセスでは、次の図に示すように、単純なストーリーボードが生成されます。 ストーリーボードには 1 つの遷移 T1 が含まれています。これにより、変数 X の値は一定の期間にわたって線形的に変化します。

このような単純なシナリオでは、 IUIAnimationManager::ScheduleTransition メソッドを使用する方法もあります。

Context-Sensitive期間の使用

一部の画面切り替えには一定の継続時間が設定されますが、他の遷移の継続時間は、遷移の開始時にアニメーション化された変数の初期値または速度によって異なります。 たとえば、 IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed メソッドは、アニメーション変数の初期値と指定した最終値の差に比例する期間を持つ遷移を作成します。 この図と残りの図では、任意の期間を持つこのような遷移が疑問符 (?) で示され、ストーリーボードの再生時に実際の期間が決定されます。

より複雑なストーリーボードの構築

ストーリーボードを作成し、単一の遷移 T1 を追加した後、 IUIAnimationStoryboard::AddTransition メソッドをもう一度呼び出し、T1 ではなく T2 で X 変数の 2 つ目の遷移を追加できます。

T2 遷移に状況依存の期間があると仮定すると、ストーリーボードには、変数 X に影響を与える任意の期間の 2 つのバックツーバック遷移が含まれるようになりました。

変数 Y と遷移 T3 を使用して AddTransition を再度呼び出すと、ストーリーボードの先頭に 3 番目の遷移が追加されます。 ストーリーボードの再生時に X と Y の値に応じて、T3 は T1 の後、または T2 の後で終了する場合があります。

キーフレームの使用

ストーリーボードの先頭からのオフセットに画面切り替えを追加するには、まずキーフレームを追加する必要があります。 キーフレームは時間のインスタントを表し、それ自体がストーリーボードの動作に影響を与えるわけではありません。 すべてのストーリーボードには、ストーリーボードの開始を表す暗黙的なキーフレームUI_ANIMATION_KEYFRAME_STORYBOARD_START。UI_ANIMATION_KEYFRAME_STORYBOARD_STARTを使用して IUIAnimationStoryboard::AddKeyframeAtOffset メソッドを呼び出すことで、最初からオフセットに新しいキーフレームを追加できます。

キーフレームを追加するオフセットは、常に別のキーフレームに対して相対的です。 次の図は、キーフレーム 1 と遷移 T4 を追加した結果を示しています。これは、変数 Z に適用され、キーフレーム 1 に揃え、一定の期間で作成されます。 もちろん、他の切り替えの期間はまだわかっていないため、T4 は最後の切り替えで終了しない可能性があります。

キーフレームは、 IUIAnimationStoryboard::AddKeyframeAfterTransition メソッドを使用して、画面切り替えの最後に配置することもできます。 次の図は、T1 の後にキーフレーム 2 を追加し、T2 の後にキーフレーム 3 を追加した結果を示しています。

ストーリーボードが再生されるまで T1 と T2 の継続時間は不明であるため、キーフレーム 2 とキーフレーム 3 のオフセットもそれまで決定されません。 その結果、キーフレーム 2 とキーフレーム 3 は、キーフレーム 1 より前に発生する可能性があります。

IUIAnimationStoryboard::AddTransitionBetweenKeyframes メソッドを使用すると、切り替えの開始と終了の両方をキーフレームに合わせて調整できます。 次の図は、キーフレーム 2 とキーフレーム 3 の間に、変数 Y に 5 番目の遷移 T5 を追加した結果を示しています。 これにより T5 の継続時間が変更され、キーフレーム 2 とキーフレーム 3 の相対オフセットに応じて長くまたは短くなります。

変数の保持

T4 が T2 と T5 の後で終了すると、ストーリーボードは変数 X と Y のアニメーション化を停止し、他のストーリーボードでアニメーション化できるようにします。 ただし、アプリケーションは IUIAnimationStoryboard::HoldVariable メソッドを呼び出して、ストーリーボードが終了するまで、最終的な値でアニメーション化する変数の一部またはすべてをストーリーボードに保持するように要求できます。 次の図は、T4 が最後に終了したときに X と Z を保持した結果を示しています。 ストーリーボードが完了するまで、ストーリーボードは X を最後の値に保持することに注意してください。 T4 が終了するとストーリーボードが終了するため、ホールドは Z には影響しません。

Y はこのストーリーボードに保持されませんが、別のストーリーボードがアニメーション化しない限り、T5 の完了後にその値は変更されません。 Y は保持されないため、他のストーリーボードは、優先度に関係なく、T5 が完了した後に Y をアニメーション化できます。 これに対し、X は保持されるため、優先度の低いストーリーボードでは、このストーリーボードが完了するまで X をアニメーション化できません。

これらの図はすべて、ストーリーボードの再生が開始されたときに変数の現在の値の任意のセットを想定しています。 他の値が見つかった場合は、次の図に示すように、状況依存遷移の期間が異なる可能性があります。

このシナリオでは、T3 が完了する前に T5 が開始され、T3 がトリミングされます。 T4 は T2 と T5 より前に終了するため、Z の値はストーリーボードの最後まで保持されます。 一般に、ストーリーボードの再生を開始するときの変数の値と速度は、キーフレームの順序とストーリーボードの全体的な長さと形状に影響を与える可能性があります。

ストーリーボードのスケジュール設定

ストーリーボードをスケジュールする場合、開始時刻は、そのアウトラインと、現在スケジュールに含まれているストーリーボードのアウトラインによって決まります。 具体的には、ストーリーボードが各変数をアニメーション化する最初と最後の瞬間は、2 つのストーリーボードが衝突するかどうかとタイミングを決定しますが、内部の遷移の内部の詳細は重要ではありません。

次の図は、3 つの変数をアニメーション化する 5 つの画面切り替えがあるストーリーボードのアウトラインを示しています。

Windows アニメーション プラットフォームの基礎となるのは、必要に応じて、あるアニメーションを別のアニメーションが開始する前に完了させることのサポートです。 これにより多くの論理的な問題は解消されますが、UI に任意の待機時間が発生します。 これに対処するために、アプリケーションは IUIAnimationStoryboard::SetLongestAcceptableDelay メソッドを使用して、ストーリーボードの開始に許容される最も長い遅延を指定できます。アニメーション マネージャーはこの情報を使用して、指定された待機時間が経過する前にストーリーボードをスケジュールします。 ストーリーボードがスケジュールされている場合、アニメーション マネージャーは、他のストーリーボードを最初に取り消す、トリミングする、終了する、圧縮する必要があるかどうかを判断します。

アプリケーションは、ストーリーボードの状態が変化したときに呼び出されるハンドラーを登録できます。 これにより、ストーリーボードの再生が開始されたとき、完了まで実行されたとき、スケジュールから完全に削除されたとき、または優先度の高いストーリーボードによる中断が原因で完了できなくなると、アプリケーションが応答できるようになります。 ストーリーボード イベント ハンドラー (または優先順位の比較) に渡されるストーリーボードを識別するために、アプリケーションは IUIAnimationStoryboard::SetTag メソッドを使用して、変数を識別するために使用できるのと同様に、ストーリーボードにタグを適用できます。 ストーリーボードの再利用と同様に、開発者はタグを使用してストーリーボードを識別する際に注意を払う必要があります。また、ユーザーアクションによって多くのストーリーボードがキューに入れられたときにあいまいさが発生しないようにする必要があります。

次の例は、このトピックの前のセクションで構築されたストーリーボードをスケジュールする試行の 2 つのバリエーションを示しています。

このシナリオでは、変数 W、X、Y、Z をアニメーション化するために、A から F の 6 つのストーリーボードが既にスケジュールされていますが、A と B のみが再生を開始しています。 G というラベルが付いた新しいストーリーボードには、許容できる最も長い遅延時間が次の図に示す期間に設定されています。

アプリケーションには、次のロジックを含む優先度比較が登録されています。

• G は C と E のみを取り消し、失敗を防ぐためにのみ取り消すことができます。
• G は A、C、E、F のみをトリミングでき、失敗を防ぐためにのみトリミングできます。
• すべてのストーリーボードは、他のストーリーボードを圧縮できます (圧縮は常に失敗を防ぐためにのみ行われます)。

注意

修飾子 "失敗を防ぐためのみ" は、 priorityEffect パラメーターがUI_ANIMATION_PRIORITY_EFFECT_FAILUREされている場合にのみ、登録済みの優先度比較で S_OKが返されることを意味します。 詳細については、 IUIAnimationPriorityComparison::HasPriority メソッドを参照してください。

許容される最も長い遅延が経過する前に G を開始するには、アニメーション マネージャーで次の操作を行う必要があります。

• トリミング F
• キャンセル E

E が取り消されると、D と F が明らかにされ、元のアウトラインに戻ります。

アニメーション マネージャーは、許容される最も長い遅延が経過する前にスケジュールするために C をキャンセルまたはトリミングする必要がないため、C と G の会議によって G がいつ開始されるかが決まります。

G が正常にスケジュールされると、その遷移の期間を決定でき、そのアウトラインの残りの部分がわかっています。 ただし、その後別のストーリーボードがスケジュールから削除されると、アウトラインが変更される可能性があります。

2 番目の例として、上記のようなシナリオを検討しますが、G に指定された許容可能な遅延が最も短くなります。

この場合、次のアクションが実行されます。

• トリミング F
• キャンセル E
• Cancel C

また、アニメーション マネージャーは、示されている量だけ D を圧縮して、G が許容できる最も長い遅延後に開始し、後で開始できるようにする必要があります。

相対的なタイミングを維持するために、A、B、F も圧縮されます。

ただし、関連のない変数 (表示されない) のストーリーボードは圧縮されません。

ここでも、G のアウトラインがわかっており、最初のシナリオの結果とは異なります。これは、変数が G の開始時に異なる値を持っているためです。

関連トピック

IUIAnimationManager

IUIAnimationPriorityComparison

IUIAnimationStoryboard

IUIAnimationTransitionLibrary