状態の変更後に再生されるアニメーションの追加

コントロールが特定の状態に切り替わると再生されるアニメーションを追加できます。たとえば、マウス ポインターをボタンの上に置くとそのボタンの色が変わります。これは、MouseOver 状態に切り替わったことにより発生する動作です。ボタンを回転させるなどのアニメーションを MouseOver 状態に追加すると、そのアニメーションは、ボタンの色が変わった後に実行されます。

アニメーションを状態に追加するには

1. アニメーション ワークスペースに切り替えます。これによりアートボードの [オブジェクトとタイムライン] パネルが移動し、タイムラインを表示するための領域が広がります。

2. [状態] で、アニメーションを追加する状態を選択します。

3. [オブジェクトとタイムライン] パネルで、[タイムラインを表示する] をクリックします。

   

   メモ :
   [状態] で [ベース] が選択されている場合は、状態記録モードではないため、[タイムラインを表示する] は表示されません。

4. この状態のコントロールの外観を既定の外観から変更した場合、[ベース] が選択されているときは、0 秒のマークでキーフレームが設定されています。

   

5. さらにアニメーションを追加するには、再生ヘッド をタイムライン上の他の時間に移動し、アートボード上のオブジェクトに対して変更を加えます。

   たとえば、トランプを回転させるには、まず、再生ヘッド  を 1 秒のマークに移動し、[オブジェクトとタイムライン] で LayoutRoot オブジェクトを選択します。次に、[プロパティ] パネルの [変換] で [回転] タブを選択し、Angle プロパティを 360 に設定します。

   

6. [再生] をクリックして、アニメーションをプレビューします。

7. F5 キーを押して、状態アニメーションをテストします。

   ヒント :
   状態が再度変更されたときに、コントロールが逆方向に回転して 0 度に戻らないようにするには、この状態が他のすべての状態に切り替わるときの状態に対する切り替え時間を 0 秒に設定します。手順については、「状態の切り替え時間の変更」を参照してください。

次のステップ

• 状態アニメーションを複数回または永遠にループさせることができます。また、最後のキーフレームの到達時に反転させることも可能です。詳細については、「繰り返しまたは反転するようにストーリーボードを変更する」を参照してください。

• キーフレーム間で発生するアニメーションの速さを調整して、より自然なアニメーションを作成できます。詳細については、「キーフレーム間のアニメーションの補間の変更」を参照してください。

• システム コントロール テンプレートを変更しているときに、アプリケーションの変更を確認するには、F5 キーを押します。ユーザー コントロールを操作しているときに、変更されたアニメーションが動作することを確認するには、ユーザー コントロールがマウス クリックに応答するよう設定します。詳細については、「ユーザー操作に対応する状態の変更」を参照してください。

Copyright ©2011 by Microsoft Corporation. All rights reserved.