次の方法で共有

キーフレーム間のアニメーションの補間の変更

  • [アーティクル]

キーフレーム間の補間では、2 つのキーフレーム間の経過時間中に、プロパティの変化がどのようにアニメーション化されるかについてが示されます。 キーフレーム間の補間を変更すると、アニメーションが現実的になります。 たとえば、ボールの跳ね返りをアニメーション化する場合は、ボールが空中に上がるときに移動が減速し、地面に落ちるときに加速するようにキーフレーム間の補間を変更できます。

次の表に、キーフレーム間の補間を設定する 3 つの方法を示します。

キーフレーム間の補間の方法

説明

イーズ インとイーズ アウトの値の選択

この方法は、Windows Presentation Foundation (WPF) プロジェクトだけで使用できます。

JJ170490.6194a099-fac7-4048-9abf-f3c2c25fc719(ja-jp,VS.120).png

キーフレームを右クリックすると表示されるドロップダウン メニューを使用して、キーフレームに近づくまたはキーフレームから離れるときの補間を変更します。

ドロップダウン メニューには、次の補間オプションがあります。

  • イーズ イン   タイムラインの再生ヘッドがキーフレームに近づくときにプロパティ値がどのように変化するかを設定します。 イーズの度合いは、0% (イーズなし) ～ 100% (フル イーズ。編集するキーフレームと前のキーフレーム間の半分の時間) の値に指定できます。

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

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

KeySpline グラフの使用

JJ170490.d0752aac-3556-466e-957e-cf06010c0b57(ja-jp,VS.120).png

KeySpline グラフを使用して、タイムラインの再生ヘッドがキーフレームに近づくまたはキーフレームから離れるときの補間を変更します。

このグラフには、選択したキーフレームとその前のキーフレームの間でアニメーション化されたプロパティの値がプロットされます。 一般に、線の傾きが急なほど、その時点での値の変化も急速になります。

グラフが左下隅から右上隅に直線状に伸びている場合は、線状補間です。

JJ170490.f5cb5969-446e-44c9-bf61-a23e8b026e6a(ja-jp,VS.120).png

黄色いコントロール ポイントのどちらかをドラッグして、前のキーフレームを離れた後または選択したキーフレームに到達した後に、どの程度の速さでプロパティ値が変化するかを変更できます。

メモメモ
KeySpline グラフと、 [イーズ イン]、[イーズ アウト] の値は同期されています。[イーズ イン] の値を変更すると、選択したキーフレームの KeySpline グラフにある右上のコントロール ポイントが変わります。[イーズ アウト] の値を変更すると、選択したキーフレームの次のキーフレームの KeySpline グラフにある左下のコントロール ポイントが変わります。

EasingFunction の選択

この方法は、Microsoft Silverlight プロジェクトだけで使用できます。

JJ170490.85f020f5-4ac1-4b75-a63d-a5c5d0ece242(ja-jp,VS.120).png

キーフレームを選択したときに [プロパティ] パネルに表示される EasingFunction ドロップダウン メニューを使用して、再生ヘッドがキーフレームに近づくときの補間を変更します。

Blend for Visual Studio には、イージング用の関数がいくつか用意されています。 これらの関数を KeySpline グラフと同じ要領で使用して、選択したキーフレームにタイムラインの再生ヘッドが近づくときの補間を設定します。 [In]、[Out]、[InOut] の下にあるイメージのボタンを選択して、どの関数を使うかを決めます。 [In] 列にあるボタンは、KeySpline の始点に適用する効果を、[Out] 列にあるボタンは KeySpline の終点に適用する効果を示します。[InOut] 列のボタンは、両方の点に適用する効果を示します。 目的の KeySpline グラフの形に合ったボタンを選択してください。

Silverlight SDK を使用すると、イージング用のカスタム関数をプログラミングできます。

詳細については、MSDN の「EasingFunctionBase クラス (System.Windows.Media.Animation)」を参照してください。

Silverlight SDK の情報を見るには、[スタート] ボタンをクリックし、[すべてのプログラム]、[Microsoft Silverlight SDK] の順にポイントして [ようこそ] をクリックします。

メモメモ
EasingFunction を選択すると、キーフレームに既に適用されている補間効果がすべて削除されます。

また、切り替え効果を時間の経過とともにではなく、2 つのキーフレームの間で突然起こるようにするには、[ホールド イン] 補間オプションを選択します。

注意

次の手順は、キーフレームを含むストーリーボードを開いていることを前提にしています。

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

ヒント

次の手順は、キーフレームを 1 つだけ選択している場合と、Ctrl キーを押しながら複数選択している場合の両方に当てはまります。

キーフレームから離れるときの遷移を変更するには

  • 以下のいずれかを実行します。

    1. タイムライン バーで、効果の遷移の始点となるキーフレーム JJ170490.fa3c696d-5463-4000-8a6b-650fe6759bf7(ja-jp,VS.120).png を右クリックします。表示されるドロップダウン メニューの [イーズ アウト] をポイントして、一覧から値を選択します。

    2. タイムライン バーで、効果の遷移の始点となるキーフレームの次のキーフレーム JJ170490.fa3c696d-5463-4000-8a6b-650fe6759bf7(ja-jp,VS.120).png を選択し、[プロパティ] パネルの [イージング] で、[KeySpline] をクリックします。 KeySpline グラフの左下隅にある黄色いコントロール ポイントをドラッグします。

    3. タイムライン バーで、効果の遷移の始点となるキーフレームの次のキーフレーム JJ170490.fa3c696d-5463-4000-8a6b-650fe6759bf7(ja-jp,VS.120).png を選択し、[プロパティ] パネルの [イージング] で、[EasingFunction] をクリックします。 [なし] の横にあるドロップダウン矢印をクリックし、イージング関数の横にあるボタンの 1 つを選択します。

キーフレームに近づくときの遷移を変更するには

  1. タイムライン バーで、効果の遷移の終点となるキーフレーム JJ170490.fa3c696d-5463-4000-8a6b-650fe6759bf7(ja-jp,VS.120).png を右クリックします。

  2. 以下のいずれかを実行します。

    • 表示されるドロップダウン メニューの [イーズ イン] をポイントして、一覧から値を選択します。

    • [プロパティ] パネルの [イージング] で、KeySpline をクリックします。 KeySpline グラフの右上隅にある黄色いコントロール ポイントをドラッグします。

    • [プロパティ] パネルの [イージング] で、EasingFunction をクリックします。 [なし] の横にあるドロップダウン矢印をクリックし、イージング関数の横にあるボタンの 1 つを選択します。

特定のキーフレームへの突然の切り替え

時間の経過とともに効果が遷移するのではなく、キーフレームの間で突然起こるようにすることができます。 [ホールド イン] 補間オプションを使用すると、再生ヘッドがキーフレームに達したときに、プロパティがそのキーフレームに設定されている別の値に突然変わります。

キーフレームの間で効果が突然起こるようにするには

  • 以下のいずれかを実行します。

    1. タイムライン バーで、プロパティを突然変える位置のキーフレーム JJ170490.fa3c696d-5463-4000-8a6b-650fe6759bf7(ja-jp,VS.120).png を選択し、[プロパティ] パネルの [イージング] で [ホールド イン] をクリックします。

    2. タイムライン バーで、プロパティを突然変える位置のキーフレーム JJ170490.fa3c696d-5463-4000-8a6b-650fe6759bf7(ja-jp,VS.120).png 右クリックし、表示されるドロップダウン メニューの [ホールド イン] をクリックします。 ドロップダウン メニューの [ホールド イン] にチェック マークが表示されます。

      注意

      [ホールド イン] を選択すると、選択したキーフレームに適用されていた補間効果と、タイムライン バーの前のフレームを始点とする補間効果がすべて削除されます。タイムラインの後続のキーフレームを始点とする補間効果は、そのまま残ります。

参照

処理手順

キーフレームの削除

キーフレームの作成

キーフレームの貼り付けまたは移動

他のキーフレームでの補間の値の再利用