Key-Frame アニメーションの概要

このトピックでは、キー フレーム アニメーションについて説明します。 キー フレーム アニメーションを使用すると、2 つ以上のターゲット値を使用してアニメーション化し、アニメーションの補間方法を制御できます。

[前提条件]

この概要を理解するには、Windows Presentation Foundation (WPF) のアニメーションとタイムラインについて理解している必要があります。 アニメーションの概要については、「 アニメーションの概要」を参照してください。 また、From/To/By アニメーションを理解するのにも役立ちます。 詳細については、「From/To/By アニメーションの概要」を参照してください。

Key-Frame アニメーションとは

From/To/By アニメーションと同様に、キー フレーム アニメーションはターゲット プロパティの値をアニメーション化します。 Duration上にターゲット値間の遷移が作成されます。 ただし、From/To/By アニメーションでは 2 つの値間の遷移が作成されますが、1 つのキー フレーム アニメーションでは任意の数のターゲット値間に遷移を作成できます。 From/To/By アニメーションとは異なり、キー フレーム アニメーションには、ターゲット値を設定する From、To、By のプロパティはありません。 キー フレーム アニメーションのターゲット値は、キー フレーム オブジェクト ("キー フレーム アニメーション" という用語) を使用して記述されます。 アニメーションのターゲット値を指定するには、キー フレーム オブジェクトを作成し、アニメーションの KeyFrames コレクションに追加します。 アニメーションを実行すると、指定したフレーム間で遷移します。

複数のターゲット値をサポートするだけでなく、一部のキー フレーム メソッドでは複数の補間方法もサポートされています。 アニメーションの補間メソッドは、ある値から次の値に遷移する方法を定義します。 補間には、離散、線形、スプラインの 3 種類があります。

キー フレーム アニメーションを使用してアニメーション化するには、次の手順を実行します。

• アニメーションを宣言し、その Durationを指定します。これは、開始/終了/指定タイプのアニメーションと同様です。

• ターゲット値ごとに、適切な型のキー フレームを作成し、その値と KeyTimeを設定して、アニメーションの KeyFrames コレクションに追加します。

• From/To/By アニメーションと同様に、アニメーションをプロパティに関連付けます。 ストーリーボードを使用してプロパティにアニメーションを適用する方法の詳細については、「 ストーリーボードの概要」を参照してください。

次の例では、 DoubleAnimationUsingKeyFrames を使用して、 Rectangle 要素を 4 つの異なる場所にアニメーション化します。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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 つ以上のプロパティに適用することもできます。 アニメーションを適用するためのさまざまな方法の詳細については、「 プロパティ アニメーション手法の概要」を参照してください。

アニメーションの種類 Key-Frame

アニメーションはプロパティ値を生成するため、プロパティの種類ごとに異なるアニメーションの種類があります。 Doubleを受け取るプロパティ (要素のWidth プロパティなど) をアニメーション化するには、Double値を生成するアニメーションを使用します。 Pointを受け取るプロパティをアニメーション化するには、Point値を生成するアニメーションなどを使用します。

キー フレーム アニメーション クラスは、 System.Windows.Media.Animation 名前空間に属し、次の名前付け規則に従います。

<種類>AnimationUsingKeyFrames

ここで、<Type> クラスがアニメーション化する値の型です。

WPF には、次のキー フレーム アニメーション クラスが用意されています。

ターゲット値 (キー フレーム) とキータイム

異なるプロパティの種類をアニメーション化するためのキー フレーム アニメーションの種類が異なるのと同様に、キー フレーム オブジェクトの種類も異なります。値のアニメーション化と補間方法の種類ごとに 1 つサポートされます。 キー フレームの種類は、次の名前付け規則に従います。

<InterpolationMethod><Type>KeyFrame

ここで、<InterpolationMethod> はキー フレームが使用する補間メソッドで、<Type> はクラスがアニメーション化する値の型です。 3 つの補間方法をすべてサポートするキー フレーム アニメーションには、使用できる 3 種類のキー フレームがあります。 たとえば、DoubleAnimationUsingKeyFrames、DiscreteDoubleKeyFrame、LinearDoubleKeyFrameの 3 種類のキー フレームをSplineDoubleKeyFrameで使用できます。 (補間方法については、後のセクションで詳しく説明します)。

キー フレームの主な目的は、 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 秒に設定されているため、アニメーションは最終値を 2 秒間保持してから、時刻 = 0:0:10 で終了します。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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 に切り替わる場合、アニメーションは指定した時間に次の値を出力します。

離散補間

離散補間では、アニメーション関数は補間なしで 1 つの値から次の値にジャンプします。 キー フレーム セグメントが 5 秒間に 0 から 10 に切り替わる場合、アニメーションは指定された時間に次の値を出力します。

アニメーションがセグメント期間の最後まで出力値を変更しないことに注意してください。

スプライン補間はより複雑です。 次のセクションで説明します。

スプライン補間

スプライン補間を使用すると、より現実的なタイミング効果を実現できます。 アニメーションは現実の世界で発生する効果を模倣するために頻繁に使用されるため、開発者はオブジェクトの加速と減速を細かく制御し、タイミング セグメントを厳密に操作する必要があります。 スプライン キー フレームを使用すると、スプライン補間を使用してアニメーション化できます。 その他のキー フレームでは、 Value と KeyTimeを指定します。 スプライン キー フレームでは、 KeySplineも指定します。 次の例は、 DoubleAnimationUsingKeyFramesの 1 つのスプライン キー フレームを示しています。 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 つの制御点を定義します。 最初の制御点はベジエ曲線の前半の曲線係数を制御し、2 番目の制御点はベジエ セグメントの後半の曲線係数を制御します。 結果の曲線は、そのスプライン キー フレームの変化率を表します。 曲線が急であるほど、キー フレームはその値をより速く変化させます。 曲線が平坦になるにつれて、キー フレームの値は徐々に変化します。

KeySplineを使用して、落下水や跳ね返るボールなどの物理的な軌道をシミュレートしたり、モーション アニメーションに他の "イーズイン" 効果や "イーズアウト" 効果を適用したりできます。 背景フェードやコントロール ボタンのリバウンドなどのユーザー操作効果では、スプライン補間を適用して、アニメーションの変更速度を特定の方法で高速化または遅くすることができます。

次の例では、0,1 1,0 の KeySpline を指定し、次のベジエ曲線を作成します。

制御点 (0.0、1.0) および (1.0、0.0) を持つキー スプライン

<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

このキー フレームは、開始時にすばやくアニメーション化され、速度が低下し、終了する前にもう一度速度が上がります。

次の例では、次のベジエ曲線を作成する 0.5,0.25 0.75,1.0 の KeySpline を指定します。

制御点 (0.25、0.5) と (0.75、1.0) を持つキー スプライン

<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キー時間は、使用可能な時間をキー フレームの数で均等に除算して、各キー フレームの終了時刻を決定します。 次の例は、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キー時間は、各キー フレームの長さに応じて使用可能な時間を割り当てて、各フレームの期間を決定します。 これにより、アニメーションの速度またはペースが一定のままになる動作が提供されます。 次の例は、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% に設定されることに注意してください。 マルチフレーム アニメーションの最初のキー フレームのペースが設定されている場合、解決されたキー時間は 0 に設定されます。 (キー フレーム コレクションに含まれるキー フレームが 1 つだけで、ペースが設定されたキー フレームである場合、解決されたキー時間は 100% に設定されます)。

1 つのキー フレーム アニメーション内の異なるキー フレームでは、異なるキー時間の種類が使用される場合があります。

キータイムとアウトOf-Order キーフレームの組み合わせ

同じアニメーションで異なる KeyTime 値型のキー フレームを使用できます。 また、再生する必要がある順序でキー フレームを追加することをお勧めしますが、必須ではありません。 アニメーションとタイミング システムは、順番が乱れたキー フレームを処理することができます。 無効なキー時刻を持つキー フレームは無視されます。

次の一覧では、キー フレーム アニメーションのキー フレームのキー時間を解決する手順について説明します。

1. TimeSpan KeyTime値を解決します。

2. アニメーションの 補間時間の合計、キー フレーム アニメーションが前方反復を完了するのにかかる合計時間を決定します。

   1. アニメーションの Duration が Automatic または Foreverされていない場合、合計補間時間はアニメーションの Duration プロパティの値です。

   2. それ以外の場合、合計補間時間は、キー フレーム間で指定された最大 TimeSpanKeyTime 値 (存在する場合) です。

   3. それ以外の場合、合計補間時間は 1 秒です。

3. 合計補間時間値を使用して、 PercentKeyTime 値を解決します。

4. 前の手順でまだ解決されていない場合は、最後のキー フレームを解決します。 最後のキー フレームの KeyTime が Uniform または Paced場合、解決された時間は合計補間時間と等しくなります。

   最初のキー フレームの KeyTime が Paced され、このアニメーションがキー フレームを超える場合は、その KeyTime 値を 0 に解決します。キー フレームが 1 つしかなく、その KeyTime 値が Paced場合は、前の手順で説明したように、合計補間時間に解決されます。

5. 残りの UniformKeyTime 値を解決します。各値には、使用可能な時間の等しい共有が与えられます。 このプロセス中、未解決の PacedKeyTime 値は一時的に UniformKeyTime 値として扱われ、一時的に解決された時間が取得されます。

6. キー時間が指定されていないキー フレームの KeyTime 値を解決するには、 KeyTime 値を解決した最も近いキー フレームを使用します。

7. 残りの PacedKeyTime 値を解決します。 Paced KeyTime は、隣接するキー フレームの KeyTime 値を使用して、解決された時間を決定します。 目標は、アニメーションの速度がこのキー フレームの解決時間の前後で一定になるようにすることです。

8. 解決された時間 (主キー) と宣言の順序 (セカンダリ キー) の順序でキー フレームを並べ替えます。つまり、解決されたキー フレーム KeyTime 値に基づいて安定した並べ替えを使用します。

こちらも参照ください

• KeyTime
• KeySpline
• Timeline
• キー スプライン アニメーションのサンプル
• KeyFrame アニメーションのサンプル
• アニメーションの概要
• ストーリーボードの概要
• Key-Frame 使い方トピック
• タイミング動作の概要