キー フレーム アニメーションの概要
ここでは、キー フレーム アニメーションについて説明します。 キー フレーム アニメーションでは、3 つ以上のターゲット値を使用してアニメーション化し、アニメーションの補間方式を制御することができます。
このトピックは、次のセクションで構成されています。
必要条件
キー フレーム アニメーションの使用
関連トピック
必要条件
この概要を理解するには、Windows Presentation Foundation (WPF) のアニメーションおよびタイムラインに精通している必要があります。 アニメーションの概要については、「アニメーションの概要」を参照してください。また、From/To/By アニメーションについても知っておくと役に立ちます。 詳細については、「From/To/By アニメーションの概要」を参照してください。
キー フレーム アニメーションとは
From/To/By アニメーションと同様に、キー フレーム アニメーションは、ターゲット プロパティの値をアニメーション化します。 また、Duration 全体でのターゲット値間の遷移を作成します。 ただし、From/To/By アニメーションでは 2 つの値の間の遷移が作成されますが、単一のキー フレーム アニメーションでは、任意の数のターゲット値の間の遷移を作成できます。 From/To/By アニメーションとは異なり、キー フレーム アニメーションには、ターゲット値を設定するために使用する From、To、または By プロパティがありません。 キー フレーム アニメーションのターゲット値は、キー フレーム オブジェクトを使用して記述します (そのため、"キー フレーム アニメーション" と呼ばれます)。 キー フレーム アニメーションのターゲット値を指定するには、キー フレーム オブジェクトを作成してアニメーションの KeyFrames コレクションに追加します。 実行時に、アニメーションは指定したフレーム間を遷移します。
一部のキー フレーム メソッドは、複数のターゲット値をサポートするだけでなく、複数の補間方式もサポートします。 アニメーションの補間方式によって、ある値から次の値へのアニメーションの遷移方法が定義されます。 補間には、離散、線形、およびスプラインの 3 種類があります。
キー フレーム アニメーションを使用してアニメーション化するには、次の手順を実行します。
From/To/By アニメーションの場合と同様に、アニメーションを宣言してその Duration を指定します。
ターゲット値ごとに、適切な型のキー フレームを作成し、その値と KeyTime を設定して、アニメーションの KeyFrames コレクションに追加します。
From/To/By アニメーションの場合と同様に、アニメーションをプロパティに関連付けます。 ストーリーボードを使用してアニメーションをプロパティに適用する方法の詳細については、「ストーリーボードの概要」を参照してください。
次の例では、DoubleAnimationUsingKeyFrames を使用して、Rectangle 要素を 4 つの異なる場所にアニメーション化します。
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
From/To/By アニメーションと同様に、キー フレーム アニメーションも、マークアップおよびコードで Storyboard を使用するかコードで BeginAnimation メソッドを使用して、プロパティに適用することができます。 また、キー フレーム アニメーションを使用して AnimationClock を作成し、1 つ以上のプロパティに適用することもできます。 アニメーションを適用するさまざまな方法の詳細については、「プロパティ アニメーションの手法の概要」を参照してください。
キー フレーム アニメーションの種類
アニメーションによってプロパティ値が生成されるため、さまざまなプロパティ型に対応するさまざまな種類のアニメーションが存在します。 Double を受け取るプロパティ (要素の Width プロパティなど) をアニメーション化するには、Double 値を生成するアニメーションを使用します。 Point を受け取るプロパティをアニメーション化するには、Point 値を生成するアニメーションを使用します。他も同様です。
キー フレーム アニメーション クラスは System.Windows.Media.Animation 名前空間に属し、次の名前付け規則に従います。
*<Type>*AnimationUsingKeyFrames
ここで、<Type> はクラスによってアニメーション化される値の型です。
WPF には、次のキー フレーム アニメーション クラスが用意されています。
プロパティの型 |
対応する From/To/By アニメーション クラス |
サポートされている補間方式 |
|---|---|---|
離散 |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散 |
||
離散 |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散 |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
||
離散、線形、スプライン |
ターゲット値 (キー フレーム) およびキー時刻
さまざまな型のプロパティをアニメーション化するためにさまざまな種類のキー フレーム アニメーションが存在するのと同様に、キー フレーム オブジェクトにもさまざまな種類があります。このオブジェクトは、アニメーション化される値の型およびサポートされている補間方式ごとに 1 つずつあります。 キー フレームの種類は、次の名前付け規則に従います。
*<InterpolationMethod><Type>*KeyFrame
ここで、<InterpolationMethod> はキー フレームで使用される補間方式で、<Type> はクラスによってアニメーション化される値の型です。 3 つすべての補間方式をサポートするキー フレーム アニメーションでは、3 種類のキー フレームを使用できます。 たとえば、DoubleAnimationUsingKeyFrames では DiscreteDoubleKeyFrame、LinearDoubleKeyFrame、および SplineDoubleKeyFrame の 3 種類のキー フレームを使用できます (補間方式については、後のセクションで詳しく説明します)。
キー フレームの主な目的は、KeyTime および Value を指定することです。 すべての種類のキー フレームで、これら 2 つのプロパティが提供されます。
Value プロパティは、そのキー フレームのターゲット値を指定します。
KeyTime プロパティは、(アニメーションの Duration 内で) キー フレームの Value に達する時刻を指定します。
キー フレーム アニメーションが開始されると、KeyTime プロパティで定義された順序でキー フレームが反復処理されます。
0 の時点にキー フレームが存在しない場合は、アニメーションによってターゲット プロパティの現在の値と最初のキー フレームの Value の間の遷移が作成されます。それ以外の場合は、アニメーションの出力値が最初のキー フレームの値になります。
アニメーションでは、2 番目のキー フレームで指定された補間方式を使用して、最初のキー フレームと 2 番目のキー フレームの Value の間の遷移が作成されます。 遷移は最初のキー フレームの KeyTime から開始され、2 番目のキー フレームの KeyTime に到達した時点で終了します。
アニメーションが続行され、後続の各キー フレームとその前のキー フレームの間の遷移が作成されます。
最後に、アニメーションは、その Duration 以内で最大のキー時刻が指定されたキー フレームの値に遷移します。
アニメーションの Duration が Automatic の場合、またはその Duration が最後のキー フレームの時刻と等しい場合、アニメーションは終了します。 アニメーションの Duration が最後のキー フレームのキー時刻を超える場合、アニメーションは、その Duration の最後に到達するまでキー フレームの値を保持します。 すべてのアニメーションと同様に、キー フレーム アニメーションは FillBehavior プロパティを使用して、アクティブな期間の末尾に到達したときに最終的な値を保持するかどうかを決定します。 詳細については、「タイミング動作の概要」を参照してください。
次の例では、前の例で定義した DoubleAnimationUsingKeyFrames オブジェクトを使用して、Value および KeyTime プロパティの動作を示します。
最初のキー フレームは、アニメーションの出力値を直ちに 0 に設定します。
2 番目のキー フレームは、0 から 350 までアニメーション化します。 最初のキー フレームの終了時 (0 秒の時点) に開始され、2 秒間再生されて 0:0:2 の時点で終了します。
3 番目のキー フレームは、350 から 50 までアニメーション化します。 2 番目のキー フレームの終了時 (2 秒の時点) に開始され、5 秒間再生されて 0:0:7 の時点で終了します。
4 番目のキー フレームは、50 から 200 までアニメーション化します。 3 番目のキー フレームの終了時 (7 秒の時点) に開始され、1 秒間再生されて 0:0:8 の時点で終了します。
アニメーションの Duration プロパティが 10 秒に設定されているため、アニメーションは、0:0:10 の時点で終了するまでの 2 秒間その最終的な値を保持します。
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
補間方式
これまでのセクションで、複数の補間方式をサポートするキー フレーム アニメーションもあることについて説明しました。 アニメーションの補間は、アニメーションが期間全体でどのように値の間を遷移するかを記述します。 アニメーションで使用するキー フレームの種類を選択することで、そのキー フレーム セグメントの補間方式を定義できます。 補間方式には、線形、離散、およびスプラインの 3 種類があります。
線形補間
線形補間では、アニメーションはセグメント期間において定率で進行します。 たとえば、キー フレーム セグメントが 5 秒間に 0 から 10 に遷移する場合、アニメーションは指定された時点で次の値を出力します。
Time |
出力値 |
|---|---|
0 |
0 |
1 |
2 |
2 |
4 |
3 |
6 |
4 |
8 |
4.25 |
8.5 |
4.5 |
9 |
5 |
10 |
離散補間
離散補間では、補間なしでアニメーション機能がある値から次の値にジャンプします。 キー フレーム セグメントが 5 秒間に 0 から 10 に遷移する場合、アニメーションは指定された時点で次の値を出力します。
Time |
出力値 |
|---|---|
0 |
0 |
1 |
0 |
2 |
0 |
3 |
0 |
4 |
0 |
4.25 |
0 |
4.5 |
0 |
5 |
10 |
セグメント期間の最後までアニメーションの出力値が変化しないことに注目してください。
スプライン補間はより複雑です。 次のセクションを参照してください。
スプライン補間
スプライン補間を使用すると、よりリアルなタイミング効果を実現できます。 アニメーションは現実に発生する効果を模倣するために使用されることが多いため、開発者は、オブジェクトの加速と減速を細かく制御し、タイミング セグメントを緻密に操作することが必要になる場合もあります。 スプライン キー フレームを使用すると、スプライン補間でアニメーション化することができます。 他のキー フレームでは、Value および KeyTime を指定しますが、 スプライン キー フレームでは、KeySpline も指定します。 DoubleAnimationUsingKeyFrames の単一のスプライン キー フレームの例を次に示します。 KeySpline プロパティに注目してください。このプロパティが、スプライン キー フレームと他の種類のキー フレームの違いです。
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
3 次ベジエ曲線は、始点、終点、および 2 つの制御点によって定義されます。 スプライン キー フレームの KeySpline プロパティは、(0,0) から (1,1) に伸びるベジエ曲線の 2 つの制御点を定義します。 1 つ目の制御点はベジエ曲線の前半分の曲率を制御し、2 つ目の制御点はベジエ セグメントの残り半分の曲率を制御します。 作成された曲線は、そのスプライン キー フレームの変更率を示します。 曲線が急になるほどキー フレームの値の変更が速くなります。 曲線が平坦になるほどキー フレームの値の変更が遅くなります。
KeySpline を使用して、流れ落ちる水や跳ねるボールなどの物理的な軌道をシミュレートしたり、その他の "イーズイン" および "イーズアウト" 効果をモーション アニメーションに適用したりする場合があります。 背景のフェード効果やコントロール ボタンの戻り効果などのユーザー操作に関する効果の場合、スプライン補間を適用してアニメーションの変更率を特定の方法で加速または減速する場合もあります。
次の例は、KeySpline を 0,1 1,0 に指定し、次に示すベジエ曲線を作成します。
制御点が (0.0, 1.0) および (1.0, 0.0) のキー スプライン
.png "ベジエ曲線")
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
このキー フレームは、開始時にすばやくアニメーション化し、減速して再度加速し、終了します。
次の例は、KeySpline を 0.5,0.25 0.75,1.0 に指定し、次に示すベジエ曲線を作成します。
制御点が (0.25, 0.5) および (0.75, 1.0) のキー スプライン
.png "ベジエ曲線")
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
ベジエ曲線の曲率がほとんど変化しないため、このキー フレームはほぼ定率でアニメーション化されます。終了が近づくと少し減速します。
DoubleAnimationUsingKeyFrames を使用して四角形の位置をアニメーション化する例を次に示します。 DoubleAnimationUsingKeyFrames で SplineDoubleKeyFrame オブジェクトが使用されるため、キー フレームの各値の間の遷移でスプライン補間が使用されます。
<!-- This rectangle is animated using a key frame animation
with splined interpolation. -->
<Rectangle
Width="50"
Height="50"
Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="SplineAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="SplineAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:10" KeySpline="0.0,0.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
スプライン補間は理解しにくいため、さまざまな設定を試してみることをお勧めします。 キー スプライン アニメーションのサンプルを使用すると、キー スプラインの値を変更して、アニメーションに表れる結果を確認することができます。
補間方式の組み合わせ
補間の種類が異なるキー フレームを 1 つのキー フレーム アニメーションで使用することができます。 補間の種類が異なる 2 つのキー フレーム アニメーションが交互に発生する場合、2 番目のキー フレームの補間方式を使用して、最初の値から 2 番目の値への遷移が作成されます。
次の例では、線形、スプライン、および離散補間を使用する DoubleAnimationUsingKeyFrames が作成されます。
<!-- This rectangle is animated using a key frame animation
with a combination of interpolation methods. -->
<Rectangle
Width="50"
Height="50"
Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="ComboAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ComboAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"
KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
継続時間およびキー時刻の詳細
他のアニメーションと同様に、キー フレーム アニメーションにも Duration プロパティがあります。 アニメーションの Duration の指定に加えて、その継続時間のどの部分を各キー フレームに割り当てるかを指定する必要があります。 指定するには、アニメーションの各キー フレームの KeyTime を記述します。 各キー フレームの KeyTime は、そのキー フレームが終了する時刻を指定します。
KeyTime プロパティは、キー時刻の再生時間を指定するわけではありません。 キー フレームが再生される時間は、そのキー フレームが終了する時刻、前のキー フレームが終了した時刻、およびアニメーションの継続時間によって決まります。 キー時刻は、時間を表す値、割合、あるいは特殊な値 (Uniform または Paced) で指定できます。
キー時刻を指定するさまざまな方法を次に示します。
TimeSpan 値
TimeSpan 値を使用して KeyTime を指定できます。 この値は 0 以上でアニメーションの継続時間以下でなければなりません。 継続時間が 10 秒のアニメーションとキー時刻が時間を表す値として指定される 4 つのキー フレームの例を次に示します。
最初のキー フレームは、最初の 3 秒間に基準値から 100 までアニメーション化し、0:0:03 の時点で終了します。
2 番目のキー フレームは、100 から 200 までアニメーション化します。 最初のキー フレームの終了時 (3 秒の時点) に開始され、5 秒間再生されて 0:0:8 の時点で終了します。
3 番目のキー フレームは、200 から 500 までアニメーション化します。 2 番目のキー フレームの終了時 (8 秒の時点) に開始され、1 秒間再生されて 0:0:9 の時点で終了します。
4 番目のキー フレームは、500 から 600 までアニメーション化します。 3 番目のキー フレームの終了時 (9 秒の時点) に開始され、1 秒間再生されて 0:0:10 の時点で終了します。
<!-- This rectangle is animated with KeyTimes using TimeSpan values.
Goes to 100 in the first 3 seconds, 100 to 200 in
the next 5 seconds, 300 to 500 in the next second,
and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform01"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
<LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
割合の値
割合の値は、キー フレームがアニメーションの Duration に対する特定の割合の時点で終了するように指定します。 XAML では、数値の後に % 記号が続く形式で割合を指定します。 コードでは、FromPercent メソッドを使用して、割合を示す Double を渡します。 この値は 0 以上、100% 以下でなければなりません。 継続時間が 10 秒のアニメーションとキー時刻が割合として指定される 4 つのキー フレームの例を次に示します。
最初のキー フレームは、最初の 3 秒間に基準値から 100 までアニメーション化し、0:0:3 の時点で終了します。
2 番目のキー フレームは、100 から 200 までアニメーション化します。 最初のキー フレームの終了時 (3 秒の時点) に開始され、5 秒間再生されて 0:0:8 (0.8 × 10 = 8) の時点で終了します。
3 番目のキー フレームは、200 から 500 までアニメーション化します。 2 番目のキー フレームの終了時 (8 秒の時点) に開始され、1 秒間再生されて 0:0:9 (0.9 × 10 = 9) の時点で終了します。
4 番目のキー フレームは、500 から 600 までアニメーション化します。 3 番目のキー フレームの終了時 (9 秒の時点) に開始され、1 秒間再生されて 0:0:10 (1 × 10 = 10) の時点で終了します。
<!-- Identical animation behavior to the previous rectangle
but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform02"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as Percentages. -->
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="200" KeyTime="80%" />
<LinearDoubleKeyFrame Value="500" KeyTime="90%" />
<LinearDoubleKeyFrame Value="600" KeyTime="100%" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
特殊な値 Uniform
各キー フレームの時間が同じになるようにするには、Uniform タイミングを使用します。
Uniform キー時刻では、時間がキー フレームの数で均等に分割され、各キー フレームの終了時間が決まります。 継続時間が 10 秒のアニメーションとキー時刻が Uniform として指定される 4 つのキー フレームの例を次に示します。
最初のキー フレームは、最初の 2.5 秒間に基準値から 100 までアニメーション化し、0:0:2.5 の時点で終了します。
2 番目のキー フレームは、100 から 200 までアニメーション化します。 最初のキー フレームの終了時 (2.5 秒の時点) に開始され、約 2.5 秒間再生されて 0:0:5 の時点で終了します。
3 番目のキー フレームは、200 から 500 までアニメーション化します。 2 番目のキー フレームの終了時 (5 秒の時点) に開始され、2.5 秒間再生されて 0:0:7.5 の時点で終了します。
4 番目のキー フレームは、500 から 600 までアニメーション化します。 2 番目のキー フレームの終了時 (7.5 秒の時点) に開始され、2.5 秒間再生されて 0:0:1 の時点で終了します。
<!-- This rectangle is animated with KeyTimes using Uniform values. -->
<Rectangle Height="50" Width="50" Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform03"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Uniform.
When a key time is set to "Uniform" the total allotted
time of the animation is divided evenly between key frames.
In this example, the total duration of the animation is
ten seconds and there are four key frames each of which
are set to "Uniform", therefore, the duration of each key frame
is 3.3 seconds (10/3). -->
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
特殊な値 Paced
定率でアニメーション化するには、Paced タイミングを使用します。
Paced キー時刻では、各キー フレームの長さに基づいて時間が割り当てられ、各フレームの継続時間が決まります。 これにより、アニメーションの速度 (ペース) が一定になります。 継続時間が 10 秒のアニメーションとキー時刻が Paced として指定される 3 つのキー フレームの例を次に示します。
<!-- Using Paced Values. Rectangle moves between key frames at
uniform rate except for first key frame
because using a Paced value on the first KeyFrame in a
collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform04"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Paced.
Paced values are used when a constant rate is desired.
The time allocated to a key frame with a KeyTime of "Paced"
is determined by the time allocated to the other key
frames of the animation. This time is calculated to
attempt to give a "paced" or "constant velocity"
for the animation. -->
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
最後のキー フレームのキー時刻が Paced または Uniform の場合、解決されたキー時刻は 100% に設定されます。 マルチフレーム アニメーションの最初のキー フレームが Paced の場合、解決されたキー時刻は 0 に設定されます。 キー フレーム コレクションに含まれるキー フレームが 1 つだけで、Paced キー フレームである場合、解決されたキー時刻は 100% に設定されます。
1 つのキー フレーム アニメーション内の異なるキー フレームでは、異なるキー時刻を使用できます。
キー時刻と順序がバラバラのキー フレームの組み合わせ
種類が異なる KeyTime の値を持つキー フレームを 1 つのアニメーションで使用することができます。 また、キー フレームは再生順に追加することをお勧めしますが、必須ではありません。 アニメーションおよびタイミング システムでは、順序がバラバラのキー フレームを解決できます。 キー時刻が無効なキー フレームは無視されます。
キー フレーム アニメーションのキー フレームのキー時刻を解決するための手順を次に示します。
アニメーションの合計補間時間 (キー フレーム アニメーションが順方向の反復を完了するのに要する合計時間) を決定します。
最後のキー フレームを解決します (前の手順で解決していない場合)。 最後のキー フレームの KeyTime が Uniform または Paced の場合、解決された時間は合計補間時間と等しくなります。
最初のキー フレームの KeyTime が Paced で、このアニメーションに複数のキー フレームが含まれる場合、その KeyTime 値は 0 に解決されます。含まれるキー フレームが 1 つだけで、KeyTime 値が Paced の場合、その値は、前の手順で説明したように合計補間時間に解決されます。
残りの Uniform KeyTime 値を解決します。これらの値には、それぞれ均等な時間が割り当てられます。 この処理の間、未解決の Paced KeyTime 値は一時的に Uniform KeyTime 値として扱われ、一時的に解決された時間が割り当てられます。
キー時刻が指定されていないキー フレームの KeyTime 値を、そのキー フレームの最も近くで宣言されている、解決された KeyTime 値を持つキー フレームを使用して解決します。
残りの Paced KeyTime 値を解決します。 Paced KeyTime では、隣接するキー フレームの KeyTime 値を使用して時間が解決されます。 これにより、アニメーションの速度がこのキー フレームの解決された時間を基に一定になります。
キー フレームを解決された時間 (主キー) の順に並べ替え、宣言 (2 次キー) の順に並べ替えます。つまり、解決されたキー フレームの KeyTime 値に基づく安定ソートを使用します。