ストーリーボードの概要
この概要では、Windows アニメーションでの遷移とストーリーボードの使用方法について説明します。 Windows アニメーションのコンポーネントの概要については、「Windows アニメーションの概要」を参照してください。
このトピックは、次のセクションで構成されています。
Transitions
遷移では、特定の時間間隔で 1 つのアニメーション変数がどのように変化するかを定義します。 Windows アニメーションには、開発者が 1 つ以上のアニメーション変数に適用できる一般的な遷移のライブラリが用意されています。 遷移の種類によってパラメーターのセットが異なります。これには、遷移の完了時の変数の値、遷移の継続時間、ベースとなる数学関数に固有の数量 (加速度や振動の範囲など) が含まれる場合があります。
すべての遷移で、数学関数の初期値と初期速度 (傾き) という 2 つの暗黙的なパラメーターが共通しています。 これらはアプリケーションによって明示的に指定できますが、通常はアニメーション マネージャーによって、遷移の開始時にアニメーション変数の値と速度に設定されます。
遷移ライブラリ
現在、遷移ライブラリには次の遷移が用意されています。 遷移ライブラリを使用して指定できない効果がアプリケーションで必要な場合、アプリケーション用のカスタム インターポレータを実装するか、サード パーティの遷移ライブラリを使用することで、他の種類の遷移を開発者が作成できます。
| 遷移名 | 説明 |
|---|---|
| accelerate-decelerate |
アニメーション変数は、特定の期間にわたって速度が上がってから速度が低下します。 |
| constant |
アニメーション変数は遷移の最初から最後まで初期値のままです。 |
| cubic |
アニメーション変数は、指定した期間にわたって、初期値から、指定した最終速度で指定された最終的な値に変化します。 |
| discrete |
アニメーション変数は、指定した遅延時間にわたって初期値のままとなり、その後指定した最終値に瞬時に切り替わり、指定された保留時間にわたってその値のままとなります。 |
| instantaneous |
アニメーション変数は、現在の値から指定した最終的な値に即座に変化します。 |
| linear |
アニメーション変数は、指定された期間にわたって、初期値から指定された最終値に線形に遷移します。 |
| linear from speed |
アニメーション変数は、初期値から指定した速度で指定された最終的な値に線形に遷移します。 |
| parabolic from acceleration |
アニメーション変数は、初期値から指定された最終速度で指定された最終的な値に遷移し、指定された加速度で速度を変化させます。 |
| reversal |
変数は特定の期間にわたって方向を変化させます。 最終的な値は初期値と同じになり、最終的な速度は初期速度の負の値になります。 |
| sinusoidal from range |
変数は、指定された振動期間で特定の値の範囲内で、特定の期間振動します。 |
| sinusoidal from velocity |
変数は、特定の期間にわたって、指定された振動期間で振動します。 振動の振幅は変数の初期速度によって決まります。 |
| smooth stop |
アニメーション変数は、指定した最終的な値で、最大時間内にスムーズに停止します。 |
次の表に、これらの各遷移の図を示します。
| 図 |
|---|
     |
   |
   |
 |
カスタム遷移
インターポレータでは、アニメーション変数が初期値から最終的な値に進むにつれて時間の経過とともにどう変化するかを決定する数学関数を定義します。 遷移ライブラリ内の各遷移には、システムによって提供され、補間関数を実装するインターポレータ オブジェクトが関連付けられています。 遷移ライブラリを使用して指定できない効果がアプリケーションで必要な場合は、新しい遷移ごとにインターポレータ オブジェクトを実装することで、1 つ以上のカスタム遷移を実装できます。 インターポレータ オブジェクトをアプリケーションで直接使用することはできません。代わりに、関連付けられた遷移内でラップする必要があります。 遷移ファクトリはインターポレータ オブジェクトから遷移を生成するために使用されます。 詳細については、IUIAnimationInterpolator と IUIAnimationTransitionFactory を参照してください。
ほとんどのアプリケーションには、遷移ライブラリを使用して必要なすべての遷移を持つことに注意してください。そのため、インターポレータを実装する必要はありません。
ストーリーボード
ストーリーボードは、時間の経過に伴って 1 つ以上のアニメーション変数に適用される遷移のコレクションです。 ストーリーボード内の遷移は、互いに相対的に同期されたままであることが保証され、ストーリーボードはユニットとしてスケジュールまたはキャンセルされます。 目的の遷移を作成した後、アプリケーションはアニメーション マネージャーを使用してストーリーボードを作成し、その遷移をストーリーボードに追加し、ストーリーボードを適切に構成して、できるだけ早く再生するようにスケジュールします。 現在同じ変数をアニメーション化している他のストーリーボードとの競合が発生する可能性があるため、アニメーション マネージャーがストーリーボードの実際の開始時間を決定します。
ストーリーボードの全体的な期間は、ストーリーボード内の遷移の期間によって異なります。 遷移の期間を固定する必要はありません。これは、遷移の開始時にアニメーション化された変数の値と速度によって決定できます。 そのため、ストーリーボードの期間は、アニメーション化する変数の状態によっても異なります。
次の例では、アニメーション マネージャー、遷移ライブラリ、タイマーが作成されていることを前提としています。 詳細については、「メイン アニメーション オブジェクトの作成」を参照してください。 この例では、IUIAnimationManager::CreateAnimationVariable メソッドを使用して 3 つのアニメーション変数 (X、Y、Z) を作成し、IUIAnimationTransitionLibrary インターフェイスのいずれかのメソッドを使用して 5 つの遷移 (T1、T2、T3、T4、T5) を作成していることも前提としています。
シンプルなストーリーボードの構築
シンプルなストーリーボードを構築するには、IUIAnimationManager::CreateStoryboard メソッドを使用して新しいストーリーボードを作成し、IUIAnimationTransitionLibrary::CreateLinearTransition メソッドを使用して線形遷移 T1 を作成し、IUIAnimationStoryboard::AddTransition メソッドを使用して変数 X に T1 遷移を適用し、最終的な遷移をストーリーボードに追加します。
このプロセスでは、次の図に示すようにシンプルなストーリーボードが生成されます。 ストーリーボードには、一定の固定期間にわたって変数 X の値が直線的に変化する 1 つの遷移 T1 が含まれています。
このようなシンプルなシナリオでは、IUIAnimationManager::ScheduleTransition メソッドを使用する方法があります。
状況依存期間の使用
一部の遷移では期間が固定されていますが、他の遷移の期間は、遷移の開始時にアニメーション化された変数の初期値または速度によって異なります。 たとえば、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 の後に keyframe2 を追加し、T2 の後に keyframe3 を追加した結果を示しています。
ストーリーボードが再生されるまで T1 と T2 の期間は不明であるため、keyframe2 と keyframe3 のオフセットもそれまで決まりません。 そのため、keyframe2 と keyframe3 は keyframe1 より前に発生する可能性があります。
IUIAnimationStoryboard::AddTransitionBetweenKeyframes::AddTransitionBetweenKeyframes メソッドを使用して、遷移の開始と終了の両方をキーフレームに合わせることができます。 次の図は、keyframe2 と keyframe3 の間で、変数 Y に 5 番目の遷移 T5 を追加した結果を示しています。 これにより T5 の期間が変更され、keyframe2 と keyframe3 の相対オフセットに応じて長くまたは短くなります。
変数の保持
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 つのバリエーションを示しています。
このシナリオでは、6 つのストーリーボード A から F が、変数 W、X、Y、Z をアニメーション化するように既にスケジュールされていますが、A と B のみが再生を開始しています。 G というラベルが付いた新しいストーリーボードには、許容できる最も長い遅延が、次の図に示す期間に設定されています。
アプリケーションには、次のロジックを含む優先度比較が登録されています。
- G は C と E のみをキャンセルし、失敗を防ぐためにのみキャンセルすることができます。
- G では、A、C、E、F のみをトリミングでき、失敗を防ぐためだけにトリミングできます。
- ストーリーボードでは他のストーリーボードを圧縮できます (圧縮は常に失敗を防ぐためにのみ行われます)。
Note
修飾子「only to prevent failure」は、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 のキャンセル
- C のキャンセル
また、アニメーション マネージャーでは、許容される最も長い遅延後に G を開始できるように、表示された量で D を圧縮する必要があります。
相対的なタイミングを維持するために、A、B、F も圧縮されます。
ただし、関連のない変数 (表示されない) のストーリーボードは圧縮されません。
G の開始時に変数の値が異なるため、ここでも G のアウトラインが認識され、最初のシナリオの結果とは異なります。