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

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

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

1. F6 キーを押して、アニメーション ワークスペースに切り替えます。これによりアートボードの [組み合わせ] パネルが移動し、タイムラインを表示するための領域が増えます。

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

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

   

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

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

   

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

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

   

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

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

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

次の手順

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

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

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