アニメーションの概要

  • [アーティクル]

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

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

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

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

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

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

Cc295346.alert_note(ja-jp,Expression.10).gifメモ :

Expression Blend では、ストーリーボードの中に新しいオブジェクトを自動的に作成することはできませんが、コードビハインド ファイルを使用することで、新しいオブジェクトと新しいアニメーション ストーリーボードをプログラムによって生成できます。詳細については、MSDN の Windows Presentation Foundation のセクションにある「アニメーションとタイミング」を参照してください。

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

ストーリーボード

ストーリーボードは、アニメーション タイムラインを保持するコンテナです。Expression Blend 2 には、新しいストーリーボード ピッカーが追加され、この機能を使用してプロジェクト内のストーリーボードを選択および検索できるようになりました。詳細については、「ストーリーボードを開くまたは閉じる」を参照してください。

開くことが可能な複数のストーリーボードを一覧表示するストーリーボード ピッカー

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

Expression Blend 2 のもう 1 つの新機能にポップアップ メニューがあります。このメニューから、現在選択しているストーリーボードの複製、反転、削除、名前変更や、ストーリーボードを閉じる、新規ストーリーボードを作成するなどの操作を実行できます。詳細については、「ストーリーボードの複製または反転」および「ストーリーボードの名前の変更」を参照してください。

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

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

最後のタイムラインの終わりに達したときに自動的に反転または反復するように、ストーリーボードのプロパティを設定できます。詳細については、「サイクルの最後で繰り返しまたは反転させるためのストーリーボードの変更」を参照してください。

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

  • ドキュメントの本文 アプリケーションの目的がアニメーションを表示することである場合、またはアニメーションを他の場所で再利用する必要がない場合は、ドキュメントの本文内にアニメーション タイムラインを作成できます。例については、「単純なアニメーションの作成」を参照してください。

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

  • コントロールのテンプレート アプリケーション内の特定の種類のコントロール (ボタンなど) を常に同じ方法でアニメーション化する場合は、コントロールのテンプレート内にアニメーションを作成できます。これは、コントロールの外観を常に同じにする必要があるという意味ではありません。テンプレートをバインド (テンプレート内のプロパティをテンプレートが適用されるコントロールのプロパティにバインド) すれば、アニメーションの中でコントロールごとに色や視覚的な外観を変更できます。詳細については、「コントロールの概要」を参照してください。WPF の例については、「試してみよう : ボタンへのアニメーションの追加」を参照してください。

ストーリーボードは、オブジェクトに設定するトリガ (Windows Presentation Foundation プロジェクトのみ) またはイベント ハンドラによって制御 (開始、停止、一時停止) できます。詳細については、「ストーリーボードの実行タイミングの制御」または「Silverlight アプリケーションのストーリーボードを制御するボタンの作成」を参照してください。

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

タイムライン

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

アニメーション タイムラインは、[組み合わせ] パネルの [オブジェクトとタイムライン] セクションを使用して操作できます (ロードマップについては、「[組み合わせ] パネル」を参照してください)。このパネルのコントロールを使用して、時間の経過に従って変化するアートボードの表示、新しいタイムラインの追加、タイムラインの変更などを行うことができます。

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

キーフレーム

キーフレーム Cc295346.80da70bb-e635-42e8-b26d-f90453096e21(ja-jp,Expression.10).png は、いつプロパティの変化が発生するかを示すタイムライン上のマーカーです。Expression Blend には、次の 4 種類のキーフレームがあります。

  • オブジェクト レベルのキーフレームは、四角形オブジェクトなどのオブジェクト全体、または複数のオブジェクトを含むグリッドに適用されます。通常、[キーフレームの記録] ボタンをクリックして手動で設定しない限り、オブジェクト レベルのキーフレームは、いずれかの子オブジェクトのプロパティが変化していることを示します。これは、オブジェクトのノードを展開することで確認できます。たとえば、上の図 (「How does animation work in Expression Blend?」の下) では、タイムラインの Rectangle に対応する行に設定されたキーフレームが、オブジェクト レベルのキーフレームです。

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

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

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

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

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

キーフレーム間の切り替え

キーフレームの補間では、2 つのキーフレームの経過時間中に、プロパティの変化がどのようにアニメーション化されるかについて示されます。一定の時間に複数の補間方法を割り当てて、複雑な値の変化を作成することができます。

  • [イーズ イン] 値では、キーフレームに近づくときにプロパティ値がどのように変化するかを指定します。イーズの度合いは、0% (イーズなし) から 100% (フル イーズ。前のキーフレームと編集されたキーフレーム間の半分の時間) までの値で指定できます。

  • [イーズ アウト] 値では、キーフレームから離れるときにプロパティ値がどのように変化するかを指定します。イーズの度合いは、0% (イーズなし) から 100% (フル イーズ。編集されたキーフレームと次のキーフレーム間の半分の時間) までの値で指定できます。

  • [ホールド アウト] では時間の経過による変化を補間しません。再生ヘッドが、変化が発生するキーフレームに達すると、新しいプロパティ値に突然変化します。

  • [線状] 補間では、キーフレーム間でプロパティ値を等分に変化させます。キーフレーム間の補間は、最初のキーフレームの [イーズ アウト] 値が 0% であり、2 番目のキーフレームの [イーズ イン] 値が 0% の場合に線状になります。

キーフレームの補間の値を変更するには、タイムライン上のキーフレームを右クリックします。

Expression Blend 2 の新機能では、キー スプラインを使用してグラフィカル エディタでスプラインを変更することにより、キーフレーム間の切り替えを定義できます。キー スプライン値をリソースに変換して再利用することもできます。

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

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

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

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

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

Cc295346.alert_note(ja-jp,Expression.10).gifメモ :

モーション パスは、Microsoft Silverlight 1.0 または Silverlight 2 プロジェクトではサポートされていません。

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

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

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

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

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

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

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

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

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

モーション パスはタイムライン上にキーフレームによって表されるものではないので、補間効果は変更できません。ただし、繰り返し回数を変更できます (「ループの設定」を参照)。アニメーション化したオブジェクトの方向を指定して、オブジェクトのどの側面がパスの中心方向に向いても、タイムライン全体がパスの中心に向かうようにすることもできます (「モーション パスを作成、変更、または削除するには」の「移動するオブジェクトの向きをパスに合わせるには」を参照)。

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

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

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

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

2 つのアニメーション タイムラインで同じプロパティを同時にアニメーション化する場合、タイムラインからタイムラインへの変化は、2 番目のアニメーションのキーフレームを 0 秒のマークで記録するかどうかによって異なります。キーフレームを 0 秒のマークで記録しない場合、Expression Blend では、割り込みが発生した時点での最後のプロパティ値から、2 番目のタイムラインの最初のキーフレームのプロパティ値までをアニメーション化することが想定されます。この種の変化をハンドオフ アニメーションと呼びます。たとえば、あるタイムラインで幅が 2 倍に拡大し、別のタイムラインで幅が 4 倍に拡大する円があるとします。最初のタイムラインに 2 番目のタイムラインが割り込み、2 番目のタイムラインでキーフレームが 0 秒のマークに設定されていない場合は、最初のタイムラインへの割り込みが発生した時点から 2 番目のタイムラインの終点 (元の幅の 4 倍) まで滑らかに拡大する楕円になります。2 番目のアニメーション タイムラインがハンドオフ アニメーションではない場合 (キーフレームが 0 秒のマークに設定されている場合)、円は 2 番目のアニメーションの開始点に突然移動します。例については、「試してみよう : ハンドオフ アニメーションとそれ以外のアニメーションの操作」を参照してください。

Cc295346.alert_note(ja-jp,Expression.10).gifメモ :

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

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

フレーム レート

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

ただし、キーフレームを設定するタイムライン上の間隔を指定できます。この間隔率は、再生ヘッド Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(ja-jp,Expression.10).png またはキーフレーム Cc295346.80da70bb-e635-42e8-b26d-f90453096e21(ja-jp,Expression.10).png をスナップできる位置を示すので、スナップ精度と呼ばれます。たとえば、スナップ精度を秒あたり 10 キーフレームに変更すると、キーフレームは、タイムラインに沿って 10 分の 1 秒ごとに設定されます。スナップ精度を変更するには、[オブジェクトとタイムライン] でスナップ Cc295346.d4a3eb40-55f9-4120-9ba0-acc90a465828(ja-jp,Expression.10).png トグル ボタンの横にあるドロップダウン矢印をクリックし、[スナップ中] をクリックします。[スナップ精度] ダイアログ ボックスが表示されます。

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

シーン

Expression Blend では、シーン (またはユーザー コントロール) の中にアニメーションをカプセル化して、アプリケーションの他のドキュメントの中で何度も使用できます。ユーザー コントロールは、1 つのドキュメントまたは .dll (コントロール ライブラリ) ファイルの中に作成できます。アプリケーションの一部であるユーザー コントロールは、他のすべてのコントロールと同じように、[アセット ライブラリ] Cc295346.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png の [カスタム コントロール] タブからアクセスしてドキュメント内に描画できます。

Cc295346.alert_note(ja-jp,Expression.10).gifメモ :

ユーザー コントロールをプロジェクトに追加した後、そのユーザー コントロールをアセット ライブラリの中に表示するには、プロジェクトをビルドする必要があります。[プロジェクト] メニューの [プロジェクトのビルド] をクリックします。

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

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

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

    Cc295346.alert_note(ja-jp,Expression.10).gifメモ :

    トリガは、Microsoft Silverlight 1.0 または Silverlight 2 プロジェクトでは使用できません。ただし、[状態] という機能によって、Silverlight 2 プロジェクトで類似した機能を実現できます。

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

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

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

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

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

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

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

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

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

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

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

タイムラインのスクラブ

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

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

タイム スナップ

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

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

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

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

Cc295346.alert_note(ja-jp,Expression.10).gifメモ :

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

時間表示

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

[再生ヘッドの位置] ボックス : 1.450 秒を表示

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

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

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

トリガ

トリガを使用して、イベントまたはプロパティの変化に応じてアートボード上のオブジェクトの状態を変更できます。アニメーション タイムラインを開始および停止するのにトリガを使用できます。たとえば、タイムラインを作成すると、アプリケーションを初めて読み込んだときにそのタイムラインを実行する既定のトリガが作成されます。このトリガを変更するか他のトリガを作成して、ユーザーがボタンをクリックしたときや他の何らかのアクションを実行したときにタイムラインを実行するように設定できます。トリガの詳細については、「トリガの概要」を参照してください。

Cc295346.alert_note(ja-jp,Expression.10).gifメモ :

トリガは、Microsoft Silverlight 1.0 または Silverlight 2 プロジェクトでは使用できません。ただし、[状態] という機能によって、Silverlight 2 プロジェクトで類似した機能を実現できます。

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

イベント ハンドラ

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

イベント ハンドラ メソッドは、ドキュメントのコードビハインド ファイルの中に定義されます。Windows Presentation Foundation または Silverlight 2 プロジェクトでは、コードビハインド ファイルは Microsoft Visual C# または Microsoft Visual Basic .NET で記述されています (例については、「タイムラインでのトリガを使用したメディア コントロール」および「Silverlight 2 アプリケーションでの新しいページの動的読み込み」を参照)。Silverlight 1.0 プロジェクトでは、コードビハインド ファイルは JavaScript 言語で記述されています (例については、「Silverlight アプリケーションのストーリーボードを制御するボタンの作成」を参照)。

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

コード化アニメーション

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

C# または Visual Basic .NET でのコーディングを必要とする高度なアニメーション シナリオがあります。数値計算を使用してオブジェクトの動きを決定する場合などがその例です。コードビハインド ファイルでアニメーション タイムラインを操作する場合、Expression Blend で視覚的に作成するアプリケーションは基本的に WPF アプリケーションなので、Windows Presentation Foundation (WPF) のアニメーション モデルを理解しておくと役に立ちます。

アニメーション タイムラインは、Storyboard 要素によって 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 属性では、変化するプロパティを指定します。この例では、四角形の Y 位置プロパティです。

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

C# または Visual Basic .NET を使用して、コードビハインド ファイル内でアニメーション タイムラインをプログラムによって制御できます。たとえば、上のアニメーション タイムラインをコードビハインド ファイルで開始するための C# コードは次のようになります。

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

XAML とコードビハインド ファイルでのアニメーション タイムラインの作成と操作の詳細については、MSDN の Windows Presentation Foundation のセクションにある「アニメーションとタイミング」または Microsoft Expression Web サイトにあるサンプルとチュートリアルを参照してください。

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る