キーフレーム間のアニメーションの補間の変更
キーフレーム間の補間では、2 つのキーフレーム間の経過時間中に、プロパティの変化がどのようにアニメーション化されるかについてが示されます。キーフレーム間の補間を変更すると、アニメーションが現実的になります。たとえば、ボールの跳ね返りをアニメーション化する場合は、ボールが空中に上がるときに移動が減速し、地面に落ちるときに加速するようにキーフレーム間の補間を変更できます。
次の表に、キーフレーム間の補間を設定する 3 つの方法を示します。
キーフレーム間の補間の方法 |
説明 |
|---|---|
イーズ インとイーズ アウトの値の選択 この方法は、Windows Presentation Foundation (WPF) プロジェクトだけで使用できます。 .png "Cc295256.6194a099-fac7-4048-9abf-f3c2c25fc719(JA-JP,Expression.30).png") |
キーフレームを右クリックすると表示されるドロップダウン メニューを使用して、キーフレームに近づくまたはキーフレームから離れるときの補間を変更します。 ドロップダウン メニューには、次の補間オプションがあります。
キーフレーム間の補間は、最初のキーフレームの [イーズ アウト] 値が 0% であり、2 番目のキーフレームの [イーズ イン] 値が 0% の場合に線状になります。線状補間は、キーフレーム間でプロパティ値を均等に変化させます。 |
KeySpline グラフの使用 .png "Cc295256.d0752aac-3556-466e-957e-cf06010c0b57(JA-JP,Expression.30).png") |
[KeySpline] グラフを使用して、タイムラインの再生ヘッドがキーフレームに近づくまたはキーフレームから離れるときの補間を変更します。 このグラフには、選択したキーフレームとその前のキーフレームの間でアニメーション化されたプロパティの値がプロットされます。一般に、線の傾きが急なほど、その時点での値の変化も急速になります。 グラフが左下隅から右上隅に直線状に伸びている場合は、線状補間です。 .png "Cc295256.f5cb5969-446e-44c9-bf61-a23e8b026e6a(JA-JP,Expression.30).png")
黄色いコントロール ポイントのどちらかをドラッグして、前のキーフレームを離れた後または選択したキーフレームに到達した後に、どの程度の速さでプロパティ値が変化するかを変更できます。 .gif "メモ") メモ :
[KeySpline] グラフと、 [イーズ イン]、[イーズ アウト] の値は同期されています。[イーズ イン] の値を変更すると、選択したキーフレームの [KeySpline] グラフにある右上のコントロール ポイントが変わります。[イーズ アウト] の値を変更すると、選択したキーフレームの次のキーフレームの [KeySpline] グラフにある左下のコントロール ポイントが変わります。
|
EasingFunction の選択 この方法は、Microsoft Silverlight プロジェクトだけで使用できます。 .png "Cc295256.85f020f5-4ac1-4b75-a63d-a5c5d0ece242(JA-JP,Expression.30).png") |
キーフレームを選択したときに [プロパティ] パネルに表示される [EasingFunction] ドロップダウン メニューを使用して、再生ヘッドがキーフレームに近づくときの補間を変更します。 Microsoft Expression Blend には、イージング用の関数がいくつか用意されています。これらの関数を [KeySpline] グラフと同じ要領で使用して、選択したキーフレームにタイムラインの再生ヘッドが近づくときの補間を設定します。[In]、[Out]、[InOut] の下にあるイメージのボタンを選択して、どの関数を使うかを決めます。[In] 列にあるボタンは、KeySpline の始点に適用する効果を、[Out] 列にあるボタンは KeySpline の終点に適用する効果を示します。[InOut] 列のボタンは、両方の点に適用する効果を示します。目的の [KeySpline] グラフの形に合ったボタンを選択してください。 Silverlight SDK を使用すると、イージング用のカスタム関数をプログラミングできます。 詳細については、MSDN の「EasingFunctionBase Class (System.Windows.Media.Animation)」を参照してください。 Silverlight SDK の情報を見るには、[スタート] ボタンをクリックし、[すべてのプログラム]、[Microsoft Silverlight 3 SDK] の順にポイントして [ようこそ] をクリックします。 メモ :
[EasingFunction] を選択すると、キーフレームに既に適用されている補間効果がすべて削除されます。
|
また、切り替え効果を時間の経過とともにではなく、2 つのキーフレームの間で突然起こるようにするには、[ホールド イン] 補間オプションを選択します。
| メモ : |
|---|
次の手順は、キーフレームを含むストーリーボードを開いていることを前提にしています。 詳細については、「ストーリーボードを開くまたは閉じる」または「ストーリーボードの作成、変更、または削除」を参照してください。 |
.gif "ヒント") ヒント : |
|---|
次の手順は、キーフレームを 1 つだけ選択している場合と、Ctrl キーを押しながら複数選択している場合の両方に当てはまります。 |
キーフレームから離れるときの遷移を変更するには
次のいずれかの操作を行います。
タイムライン バーで、効果の遷移の始点となるキーフレーム
.png "Cc295256.fa3c696d-5463-4000-8a6b-650fe6759bf7(JA-JP,Expression.30).png")
を右クリックします。表示されるドロップダウン メニューの [イーズ アウト] をポイントして、一覧から値を選択します。タイムライン バーで、効果の遷移の始点となるキーフレームの次のキーフレーム
を選択し、[プロパティ] パネルの [イージング] で、[KeySpline] をクリックします。[KeySpline] グラフの左下隅にある黄色いコントロール ポイントをドラッグします。タイムライン バーで、効果の遷移の始点となるキーフレームの次のキーフレーム
を選択し、[プロパティ] パネルの [イージング] で [EasingFunction] をクリックします。[なし] の横にあるドロップダウン矢印をクリックし、イージング関数の横にあるボタンの 1 つを選択します。
キーフレームに近づくときの遷移を変更するには
タイムライン バーで、効果の遷移の終点となるキーフレーム
を右クリックします。次のいずれかの操作を行います。
表示されるドロップダウン メニューの [イーズ イン] をポイントして、一覧から値を選択します。
[プロパティ] パネルの [イージング] で、[KeySpline] をクリックします。[KeySpline] グラフの右上隅にある黄色いコントロール ポイントをドラッグします。
[プロパティ] パネルの [イージング] で、[EasingFunction] をクリックします。[なし] の横にあるドロップダウン矢印をクリックし、イージング関数の横にあるボタンの 1 つを選択します。
キーフレームの間で効果が突然起こるようにするには
時間の経過とともに効果が遷移するのではなく、キーフレームの間で突然起こるようにすることができます。[ホールド イン] 補間オプションを使用すると、再生ヘッドがキーフレームに達したときに、プロパティがそのキーフレームに設定されている別の値に突然変わります。
次のいずれかの操作を行います。
タイムライン バーで、プロパティを突然変える位置のキーフレーム
を選択し、[プロパティ] パネルの [イージング] で [ホールド イン] をクリックします。タイムライン バーで、プロパティを突然変える位置のキーフレーム
右クリックし、表示されるドロップダウン メニューの [ホールド イン] をクリックします。ドロップダウン メニューの [ホールド イン] にチェック マークが表示されます。メモ :[ホールド イン] を選択すると、選択したキーフレームに適用されていた補間効果と、タイムライン バーの前のフレームを始点とする補間効果がすべて削除されます。タイムラインの後続のキーフレームを始点とする補間効果は、そのまま残ります。