アニメーション オブジェクト

  • [アーティクル]

アニメーションは、それぞれが前のイメージと少しずつ異なる一連のイメージをすばやく繰り返すことで錯覚を生み出します。脳は、イメージの連続を 1 つの変化するシーンとして認識します。映画では、この錯覚は、カメラで 1 秒ごとに多数の写真、つまりフレームを記録することによって作られます。フレームを映写機で再生すると、見る人には動く画像として映ります。コンピューター アニメーションは、時間経過の変化を補間してアニメーション化するため、記録したフレームをさらに細かい時間間隔で細分化できるという点を除いて映画の場合と同様です。

Expression Blend におけるアニメーションの動作

Microsoft Expression Blend では、キーフレーム**を使用して、アニメーションの滑らかな遷移の始点と終点を定義します。Expression Blend でアニメーションを作成するには、まず、ストーリーボードを作成します。次に、そのストーリーボードのタイムラインに、プロパティの変更をマークするためのキーフレームを設定します。たとえば、rectangle がアートボード上の左側にあるときの位置を記録するキーフレームを 0 秒のマークに設定し、同じ rectangle がアートボード上の右側に移動したときの位置を記録するキーフレームを 1 秒のマークに設定したとします。この場合は、0 秒から 1 秒の間に rectangle の X プロパティと Y プロパティの変化を示すアニメーションになります。アニメーション ストーリーボードを実行すると、指定された時間内のプロパティの変化が補間され、その結果がアプリケーションに表示されます。アートボード上にあるオブジェクトのすべてのプロパティは、非視覚プロパティも含め、この方法でアニメーション化できます。

"MoveRight" という名前のストーリーボード内のタイムラインに設定されたキーフレーム (rectangle オブジェクトの Translation プロパティの X と Y の変化をマーク)

Cc295346.982f031a-74a3-414a-abc2-a0f41a741075(ja-jp,Expression.40).png

コンピューター アニメーション プログラムの中には、フレームごとに別の画像 (オブジェクト) を表示できる、フレーム単位の**アニメーションを作成できるものがあります。このようにして作成したアニメーションは、非常にサイズが大きく、実行時に大量のリソースを消費する可能性があります。そのため、Expression Blend のアニメーションは、プロパティの変化を記録し、実行時にプロパティの変化をアニメーション化するキーフレームに基づいています。さらに、Expression Blend では、アニメーション タイムラインの間に出現したり消滅したりするすべてのオブジェクトが、常にタイムラインに存在しますただし、キーフレームを使用してオブジェクトの可視性に関するプロパティを変更することで、オブジェクトの表示/非表示を操作できます。

Noteメモ :

Expression Blend では、ストーリーボードの中に新しいオブジェクトを自動的に作成することはできませんが、分離コード ファイルのコードを記述することで、新しいオブジェクトと新しいアニメーション ストーリーボードを生成できます。詳細については、MSDN の「Windows Presentation Foundation」セクションにある「アニメーションとタイミング Cc295346.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。

ストーリーボード

ストーリーボードは、アニメーション タイムラインを保持するコンテナーです。Expression Blend には、プロジェクト内のストーリーボードを選択したり検索したりできるストーリーボード ピッカー コントロールがあります。

詳細については、「ストーリーボードを開くまたは閉じる」を参照してください。

開くことができる複数のストーリーボードが一覧表示されたストーリーボード ピッカー

Cc295346.d13d140b-75cf-48f7-a3fa-bdfbd3e62db5(ja-jp,Expression.40).png

ストーリーボードを選択したら、ポップアップ メニューを使用して、現在選択しているストーリーボードの複製、反転、削除、名前の変更、ストーリーボードを閉じる、新規ストーリーボードの作成などの操作を行えます。

詳細については、「ストーリーボードの複製または反転」および「ストーリーボードの名前の変更」を参照してください。

ストーリーボードのポップアップ メニュー

Cc295346.74b1f5aa-10f5-40fc-b786-c9de76cb87ca(ja-jp,Expression.40).png

最後のタイムラインの終わりに達したときに自動的に反転または反復するように、ストーリーボードのプロパティを設定できます。

詳細については、「繰り返しまたは反転するようにストーリーボードを変更する」を参照してください。

ストーリーボードは、アプリケーションの次の場所 (スコープ) に作成できます。

  • ドキュメントの本文 アプリケーションの目的がアニメーションを表示することである場合や、アニメーションを他の場所で再利用する必要がない場合は、ドキュメントの本文内にアニメーション タイムラインを作成します。

    例については、「単純なアニメーションの作成」を参照してください。

  • シーン (ユーザー コントロール) アニメーションをドキュメントや別のアプリケーションで何度も再利用する必要がある場合は、ユーザー コントロール内にアニメーション タイムラインを作成します。これは、アニメーションを複数のドキュメントやプロジェクトとして整理する場合に便利です。ユーザー コントロールは、ボタンなどの他のコントロールと同じようにアートボードに追加できます。詳細については、下の「シーン」を参照してください。

    例については、「空のユーザー コントロールの作成」または「プロジェクトでの新しいユーザー コントロールの作成」を参照してください。

  • コントロールのテンプレート アプリケーション内の特定の種類のコントロール (ボタンなど) を常に同じ方法でアニメーションにする場合は、コントロールのテンプレート内にアニメーションを作成します。これは、コントロールの外観を常に同じにする必要があるという意味ではありません。テンプレートのバインド (テンプレート内のプロパティをテンプレートが適用されるコントロールのプロパティにバインド) すると、アニメーションの中でコントロールごとに色などの外観を変更できます。

    詳細については、「インタラクティブ コントロールの選択と使用」を参照してください。Windows Presentation Foundation (WPF) の例については、「試してみよう: ボタンへのアニメーションの追加」を参照してください。

  • 状態   コントロールの状態が変わった後で始まるアニメーションを変更する場合は、[状態] パネルでその状態を選択し、[オブジェクトとタイムライン] パネルの [タイムラインを表示する] Cc295346.d5d49398-e7e2-48f6-82e0-7ab34fda33ea(ja-jp,Expression.40).png をクリックして、タイムラインを変更します。

    状態の詳細については、「コントロール用ビジュアル状態の定義」を参照してください。

ストーリーボードは、オブジェクトに設定するトリガー、またはイベント ハンドラーによって制御 (開始、停止、一時停止) できます。

詳細については、「ストーリーボードの実行タイミングの制御」を参照してください。

タイムライン

タイムラインは、アプリケーション内にアニメーション シーケンスのための構造を提供します。Expression Blend のアニメーションは、プロパティの変化のタイミングを表すキーフレームを記録するタイムラインで構成されています。タイムラインは、アートボード上のオブジェクトに適用されるプロパティ変更のレイヤーと考えることができます。タイムラインはストーリーボードに含まれています。

アニメーション タイムラインを操作するときは、[オブジェクトとタイムライン] パネルで作業します。このパネルのコントロールを使用して、アニメーションが時間とともにどのように変わるかをアートボードで確認したり、タイムラインの追加や変更などを行うことができます。

キーフレーム

キーフレームCc295346.fa3c696d-5463-4000-8a6b-650fe6759bf7(ja-jp,Expression.40).png は、タイムラインでいつプロパティが変わるかを示すマーカーです。Expression Blend には、次の 4 種類のキーフレームがあります。

  • オブジェクト レベルのキーフレームは、rectangle オブジェクトなどのオブジェクト全体、または複数のオブジェクトを含む grid に設定します。通常、[キーフレームの記録] ボタンをクリックして手動で設定しない限り、オブジェクト レベルのキーフレームは、いずれかの子オブジェクトのプロパティが変化していることを示します。これは、オブジェクトのノードを展開することで確認できます。たとえば、上の「Expression Blend におけるアニメーションの動作」にある図で、Rectangle に対応するタイムラインの行に設定されているキーフレームは、オブジェクト レベルのキーフレームです。

  • 複合キーフレームは、プロパティにアニメーションの子プロパティがあることを示します。たとえば、上の図では、タイムラインの Translate プロパティに対応する行に設定されたキーフレームが、複合キーフレームです。複合キーフレームは、大きなプロパティ グループを 1 回の選択でまとめて変更しようとするときに使用できます。たとえば複数のキーフレームをタイムラインに沿って移動するときに便利です。

  • 単純キーフレームは、ある時点における 1 つのプロパティの変化を表します。たとえば、上の図では、タイムラインの X プロパティおよび Y プロパティに対応する行に設定されたキーフレームが、単純キーフレームです。単純キーフレームは、アニメーションを繰り返す回数など、特定の動作を変更するときに必要です。

    例については、「ループの設定」を参照してください。

  • 暗黙的なキーフレームは、最初のアニメーションに 2 番目のアニメーションが割り込み、2 番目のアニメーションに 0 秒のマークに設定されたキーフレームがない場合に出現します。割り込みの時点で Expression Blend により、プロパティの最後の既知の値と、2 番目のアニメーションで最初のキーフレームに設定されているプロパティの値との間の変化がアニメーション化されます。最後の既知の値は、最初のアニメーション内の 2 つのキーフレームの間にある場合でも、暗黙的なキーフレームと見なされます。このようなアニメーションのことを、ハンドオフ アニメーションといいます。詳細については、下の「複数の重なり合うアニメーション タイムラインの使用」を参照してください。

各種のキーフレームの違いを知っておくと、アニメーション化されるすべてのプロパティの詳細を常に確認する必要がなくなるので便利です。代わりに、各オブジェクトのプロパティを折りたたんでおき、オブジェクト レベルのキーフレームだけを表示します。オブジェクト レベルのキーフレームおよび複合キーフレームは、大きなプロパティ グループを 1 回の選択でまとめて変更しようとするときに使用できます。たとえば複数のキーフレームをタイムラインに沿って移動するときに便利です。

例については、「キーフレームの貼り付けまたは移動」を参照してください。

単純キーフレームは、アニメーションの繰り返し回数の変更など特定のアクションを実行するときに必要になります。

例については、「ループの設定」を参照してください。

キーフレーム間の遷移

キーフレームの補間とは、2 つのキーフレームの間で、プロパティの変化をどのようにアニメーションで表すかを決めることです。

キーフレームの補間を変更するには、[イーズ イン] と [イーズ アウト] の定義済みの値を選択する方法、[KeySpline] グラフを変更する方法、複雑な [KeySpline] グラフを描く組み込みの [EasingFunction] オプションを選択する方法があります。

キーフレーム間のカスタム補間を作成するキー スプライン エディター

Cc295346.7ec8ec80-9667-4e95-9dd6-16cf9199b83b(ja-jp,Expression.40).png

詳細については、「キーフレーム間のアニメーションの補間の変更」を参照してください。

手動またはモーション パスを使用したタイムラインの作成

Noteメモ :

Microsoft Silverlight プロジェクトでは、モーション パスを使用できません。

手動によるアニメーション タイムラインの作成では、タイムラインでアニメーション化するオブジェクトの動きと数を細かく制御できます。色を変化させることもできます。Expression Blend でアニメーション タイムラインを手動で作成するには、まず、[オブジェクトとタイムライン] で [新規作成] Cc295346.86937695-03dd-44ea-aa30-28d4029b3ad0(ja-jp,Expression.40).png をクリックします。次に、タイムライン再生ヘッド Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(ja-jp,Expression.40).png を移動してキーフレームを記録した後、アートボードのオブジェクトを変更してキーフレームを生成します。

例については、「単純なアニメーションの作成」を参照してください。

[モーション パスに変換] ツールを使用してオブジェクトがアートボード上のパスを移動するように指定することで、アニメーション タイムラインを自動的に生成できます。アートボード上のパスは、直線でも図形 (楕円や四角形など) でもかまいません。次の図に示すように、楕円の外周が、青い円のモーション パスになります。

モーション パスを使用したアニメーション タイムラインの作成

Cc295346.0b7efb11-9146-4bc5-a61f-2dc595f5cf5d(ja-jp,Expression.40).png

Cc295346.25182a96-9a69-478a-9cfe-5b360e6a9bea(ja-jp,Expression.40).png

2 つの独立したオブジェクトとしての ellipse と circle があります ([楕円] ツールで作成)。
Cc295346.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ja-jp,Expression.40).png

ellipse がモーション パスになります。この時点で ellipse を削除することも可能です。
Cc295346.f0c1ff71-7814-42ba-806b-7ea92d616e69(ja-jp,Expression.40).png

再生すると、circle が楕円のモーション パスに沿って移動する新しいタイムラインが生成されます。

モーション パスを使用してアニメーション タイムラインを生成する方法の例については、「モーション パスを作成、変更、または削除するには」を参照してください。

モーション パスはタイムライン上にキーフレームによって表されるものではないので、補間効果は変更できません。ただし、繰り返し回数は変更できます。

詳細については、「ループの設定」を参照してください。

また、パスの中心に向かっているオブジェクトの辺が、タイムラインを全体を通して常にパスの中心に向かったままになるように、オブジェクトのパスに対する向きを指定することもできます。

詳細については、「モーション パスを作成、変更、または削除するには」の「移動するオブジェクトの向きをパスを合わせるには」を参照してください。

モーション パスが生成された後、モーション パスを含むタイムラインに対して、手動で作成したアニメーションを追加できます。

Noteメモ :

モーション パスを含むストーリーボードを反転して、モーション パスを反転することはできません。ただし、パスを変換 (逆向きに) してさかさまに動くようにしたり、ストーリーボードの [AutoReverse] プロパティを設定して、ストーリーボードが順方向に再生されてから逆再生されるようにすることはできます。

複数の重なり合うアニメーション タイムラインの使用

Expression Blend のストーリーボードは、アプリケーションで複数のストーリーボード (および複数のタイムライン) を同時に実行できるように構成されています。たとえば、蝶を表す 2 つの円を描画し、その蝶が円形のモーション パスに沿って移動するアニメーション タイムラインを作成した後、羽がひらひらと動くアニメーション タイムラインを別に作成したとします。2 つのアニメーションを同時に再生しても、ひらひらと動くアニメーションが、円に沿って動くアニメーションに割り込むことはありません。これは、2 つのタイムラインは、蝶オブジェクトの同じプロパティをアニメーション化していないからです。

例については、「試してみよう: 重なり合うアニメーションの作成」を参照してください。

2 つのアニメーション タイムラインで同じプロパティを同時にアニメーションにする場合に、タイムラインからタイムラインへの変化は、2 番目のアニメーションのキーフレームを 0 秒にマークするかどうかによって異なります。キーフレームを 0 秒にマークしないと、割り込み時点の最後のプロパティ値から、2 番目のタイムラインの最初のキーフレームのプロパティ値までがアニメーションになります。このようなアニメーションのことを、ハンドオフ アニメーションといいます。たとえば、円の幅を 2 倍にするタイムラインと、4 倍にするタイムラインがあるとします。最初のタイムラインに 2 番目のタイムラインが割り込み、2 番目のタイムラインでキーフレームが 0 秒のマークに設定されていない場合は、最初のタイムラインへの割り込みが発生した時点から、円の幅が滑らかに広がって、2 番目のタイムラインの終点で元の幅の 4 倍の楕円になります。2 番目のアニメーション タイムラインがハンドオフ アニメーションではない場合 (キーフレームが 0 秒のマークに設定されている場合)は、2 番目のアニメーションが突然開始されます。

例については、「試してみよう: ハンドオフ アニメーションとそれ以外のアニメーションの操作」を参照してください。

Noteメモ :

2 つのタイムラインがオブジェクトの同一のプロパティをアニメーション化する場合、最初のタイムラインは、割り込みが発生した時点で停止します。これは最初のタイムラインを無限に繰り返すように設定されている場合でも同じです。

フレーム レート

Expression Blend では、アニメーションはタイムラインに沿ってキーフレームを設定することで作成され、キーフレーム間の補間は実行時に行われるので、アニメーションのフレーム レートを設定する必要はありません。アプリケーションを実行すると、アニメーション タイムラインは、.NET Framework ランタイムが実現できる最高のフレーム レートでアニメーション化されます。

ただし、キーフレームを設定するタイムライン上の間隔を指定できます。この間隔によって、再生ヘッド Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(ja-jp,Expression.40).png またはキーフレーム Cc295346.fa3c696d-5463-4000-8a6b-650fe6759bf7(ja-jp,Expression.40).png をスナップする位置が決まるので、この間隔のことをスナップ精度といいます。たとえば、スナップ精度を 1 秒間に 10 キーフレームに変更すると、タイムラインにキーフレームが 10 分の 1 秒刻みで設定されます。スナップ精度を変更するには、[オブジェクトとタイムライン] でスナップの切り替えボタン Cc295346.d4a3eb40-55f9-4120-9ba0-acc90a465828(ja-jp,Expression.40).png の横にあるドロップダウン矢印をクリックして、[スナップ] をクリックします。[スナップ精度] ダイアログ ボックスが表示されます。

シーン

Expression Blend では、シーン (ユーザー コントロール) の中にアニメーションをカプセル化して、アプリケーションの他のドキュメントで何度でも使用できます。ユーザー コントロールは、1 つのドキュメントまたは .dll (コントロール ライブラリ) ファイルの中に作成できます。アプリケーションに含まれているどのユーザー コントロールも、他のコントロールと同じように、[アセット] パネル Cc295346.0d8b8d29-1af9-418f-8741-be3097d76eab(ja-jp,Expression.40).png の [プロジェクト] カテゴリで選択して、ドキュメントに描画できます。

Noteメモ :

プロジェクトにユーザー コントロールを追加した場合に、このコントロールが [アセット] パネルに表示されるようにするには、プロジェクトをビルドする必要があります。プロジェクトをビルドするには、[プロジェクト] メニューの [プロジェクトのビルド] をクリックします。

ユーザー コントロールの中にアニメーションを作成するときは、次の点を考慮してください。

  • アニメーションを再生するタイミング   たとえば、スプラッシュ画面のアニメーションを表示した後、次第に遠ざかっていくユーザー インターフェイスのアニメーションを表示するとします。それぞれのアニメーションを個別のユーザー コントロールに配置できますが、スプラッシュ画面が完了するまで十分な時間を取ってから 2 番目のアニメーションを開始するように設定してください。

  • アニメーションで使用できるプロパティとトリガー   たとえば、アプリケーションに、ボタンと、ユーザー コントロールに含まれたアニメーションがあるとします。この場合、ボタン自体もユーザー コントロールの一部でない限り、ボタンがクリックされたときにアニメーション タイムラインを開始するユーザー コントロールに対してトリガーを追加することはできません。さらに、プロパティ値間のデータ バインドは、両方のプロパティが同じユーザー コントロールに属している場合のみ実行できます。

    Noteメモ :

    Silverlight プロジェクトでは、トリガーを使用できません。ただし、ビヘイビアーを使用して、ストーリーボードと状態の遷移を制御できます。

    詳細については、「ビヘイビアーの使用」を参照してください。

ユーザー コントロールの詳細については、「空のユーザー コントロールの作成」または「ストーリーボードの実行タイミングの制御」の「ユーザー コントロール内のストーリーボード」を参照してください。

ストーリーボードのテスト

Expression Blend のプロジェクトは、さまざまな方法でテストできます。作業環境内でテストすることも、アプリケーションをコンパイルして実行 ([プロジェクト] メニューの [プロジェクトの実行] をクリックするか、F5 キーを押します) してみることもできます。作成環境内でテストするには、[オブジェクトとタイムライン] パネルの再生コントロールを使用します。

[オブジェクトとタイムライン] パネルの再生コントロール

Cc295346.ab1e4f11-0317-4ef1-a029-7d749629f0f8(ja-jp,Expression.40).png

  • 先頭フレーム 再生ヘッド Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(ja-jp,Expression.40).png をアニメーションの最初のフレームに送ります。

  • 前のフレーム 再生ヘッドを前のフレームに送ります。

  • 再生 現在の時点からアニメーションを再生します。

  • 次のフレーム 再生ヘッドを次のフレームに送ります。

  • 末尾フレーム 再生ヘッドをアニメーションの最後のフレームに送ります。

タイムラインのスクラブ

タイムラインのスクラブは、プレビューまたはテストするアニメーションの速度や位置を正確に制御できる有益な手法です。スクラブは、再生ヘッドをドラッグして行います。再生ヘッドをドラッグすると、アニメーションがアートボードに表示されます。フレームは、進行方向または逆方向にスクラブできます。アニメーションの再生速度は、再生ヘッドをドラッグする速度によって決まります。

例については、「タイムラインのスクラブ」を参照してください。

タイム スナップ

[オブジェクトとタイムライン] パネルには、アニメーションの再生用コントロールと、スナップ精度 (1 秒あたりのフレームレート) で指定した間隔で前後に移動するためのコントロールがあります。タイム スナッピングは、再生コントロールを使用して時間を移動するときに使用します。次のフレームまたは前のフレームのボタンをクリックすると、再生ヘッドが、指定した 1 秒当たりのフレーム数だけ前後に送られます。この時間の長さは、スナップ精度によって決まります。

[スナップ精度] ダイアログ ボックス

Cc295346.df6c0208-d349-4948-b096-31869b94269d(ja-jp,Expression.40).png

スナップ精度の使用例については、「タイムライン位置合わせの無効化または有効化」および「スナップ精度の変更」を参照してください。

Noteメモ :

タイムライン位置合わせは、アプリケーションを実行するときのアニメーションのフレーム レートや再生速度には適用されません。詳細については、上の「フレーム レート」を参照してください。

時間表示

現在の時間表示には、現在選択されている時点が MM:SS:xxx (分、秒、ミリ秒) 形式で表示されます。指定した時点にすばやく移動するには、このフィールドに直接移動する数値を入力します。

1.450 秒を示している [再生ヘッドの位置] ボックス

Cc295346.74a390c7-0ed5-4f6a-8f8b-372e6e0dcbdf(ja-jp,Expression.40).png

時間表示の使用例については、「タイムラインの特定のポイントへの移動」を参照してください。

トリガー

イベントの発生やプロパティの変更によって、アートボードにあるオブジェクトの状態が変わるようにするは、トリガーを使用します。アニメーション タイムラインを開始したり停止したりするのにも、トリガーを使用できます。たとえば、タイムラインを作成すると、アプリケーションを初めて読み込んだときにそのタイムラインを実行する既定のトリガーが作成されます。このトリガーを変更するか他のトリガーを作成して、ユーザーがボタンをクリックしたときや何か操作したときに、タイムラインが実行されるように設定します。

トリガーの詳細については、「トリガーを使用した WPF コントロールのビヘイビアーの定義」を参照してください。

Noteメモ :

Silverlight プロジェクトでは、トリガーを使用できません。ただし、ビヘイビアーを使用して、ストーリーボードと状態の遷移を制御できます。

詳細については、「ビヘイビアーの使用」を参照してください。

イベント ハンドラー

イベント ハンドラーは、特定のイベント (MouseOver など) が発生したときにプログラムが実行されるようにするメソッドです。アプリケーションでイベントが発生したときに、プロパティの設定やアニメーション タイムラインの制御より複雑な操作を行う必要がある場合は、トリガーの代わりにイベント ハンドラーを使用します。イベント ハンドラー メソッドで、別のオブジェクトのプロパティの設定、新しいドキュメントの読み込み、新しいオブジェクトの作成、数値計算を使用したオブジェクトのアニメーション化などのプログラミング ロジックを追加できます。たとえば、KeyDown イベント中に押されたキーを判別する場合は、キーが押されたときに呼び出されるイベント ハンドラー メソッドを作成し、押されたキーを判別するコードを追加する必要があります。

イベント ハンドラー メソッドは、ドキュメントの分離コード ファイルで定義します。WPF プロジェクトと Silverlight プロジェクトでは、分離コード ファイルを Microsoft Visual C# または Microsoft Visual Basic .NET で記述します。

例については、「タイムラインでのトリガーを使用したメディア コントロール」および「試してみよう: Silverlight アプリケーションでの新しいページの動的読み込み」を参照してください。

コード化アニメーション

Expression Blend の [デザイン] ビューでは、XAML や分離コード ファイルのコードを変更せずにアニメーション タイムライン全体を作成できます。また、ユーザーの操作に基づいてアニメーション タイムラインを開始、停止、および一時停止できるトリガーを構成できます。アニメーションに関する作業のほとんどは、Expression Blend の [デザイン] ビューで行います。

C# または Visual Basic .NET でのコーディングを必要とする高度なアニメーション シナリオがあります。数値計算を使用してオブジェクトの動きを決定する場合などがその例です。分離コード ファイルでアニメーション タイムラインを操作する場合は、アプリケーション (WPF または Silverlight) に対応しているアニメーション モデルを理解しておくことをお勧めします。

アニメーション タイムラインは、XAML の ストーリーボード要素で表されます。たとえば、Expression Blend の [デザイン] ビューでアニメーション タイムラインを作成すると、次のような XAML コードが生成されます。

<Window.Resources>
  <Storyboard x:Key="MoveRight">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="rectangle"
        Storyboard.TargetProperty="...(TranslateTransform.Y)">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Window.Resources>

この XAML 例の属性を次に示します。

  • x:Key 属性は、タイムライン (またはストーリーボード) の名前を指定します。

  • BeginTime 属性では、アニメーションの開始時間を指定します。この例では、0 秒のマークです。

  • TargetName 属性では、ストーリーボード (またはタイムライン) がアニメーション化する要素の名前を指定します。この例では、"rectangle" という名前のオブジェクトです。

  • TargetProperty 属性では、変化するプロパティを指定します。この例では、rectangle の Y 位置プロパティです。

  • KeyTime 属性は、ターゲット プロパティが変化する間隔と変化する値を指定します。Expression Blend の [デザイン] ビューでは、これらの要素がタイムライン上のキーフレームになります。

分離コード ファイルに、C# または Visual Basic .NET のコードを記述してアニメーション タイムラインを制御します。たとえば、上のアニメーション タイムラインを開始するための C# コードは次のようになります。

Storyboard moveRight;
moveRight = (Storyboard)this.Resources["MoveRight"];
moveRight.Begin(this);

XAML と分離コード ファイルでアニメーション タイムラインを作成、操作する方法の詳細については、MSDN の「Windows Presentation Foundation」にある「アニメーションとタイミング Cc295346.xtlink_newWindow(ja-jp,Expression.40).png」または Microsoft Expression Web サイト Cc295346.xtlink_newWindow(ja-jp,Expression.40).pngにあるサンプルとチュートリアルを参照してください。

Copyright ©2011 by Microsoft Corporation. All rights reserved.