次の方法で共有

キー フレーム アニメーションの概要

  • [アーティクル]

このトピックでは、キー フレーム アニメーションの概要を説明します。 キー フレーム アニメーションでは、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 コレクションに追加します。 アニメーションを実行すると、アニメーションが指定したフレームの間で遷移します。

複数のターゲット値のサポートに加え、一部のキー フレーム メソッドでは、複数の補間方式もサポートします。 アニメーションの補間方式は、1 つの値から次の値にどのように遷移するかを定義します。 補間には、離散、線形、およびスプラインの 3 つの種類があります。

キー フレーム アニメーションをアニメーション化するには、次の手順を完了します。

  • From/To/By アニメーションの場合と同じように、アニメーションを宣言して、その 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 つ以上のプロパティに適用することもできます。 アニメーションを適用するためのさまざまなメソッドの詳細については、「プロパティ アニメーションの手法の概要」を参照してください。

キー フレーム アニメーションの種類

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

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

<Type>AnimationUsingKeyFrames

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

WPF は、次のキー フレーム アニメーション クラスを提供します。

プロパティの型 対応するFrom/To/By アニメーションのクラス サポートされる補間方式
Boolean BooleanAnimationUsingKeyFrames 離散
Byte ByteAnimationUsingKeyFrames 離散、線形、スプライン
Color ColorAnimationUsingKeyFrames 離散、線形、スプライン
Decimal DecimalAnimationUsingKeyFrames 離散、線形、スプライン
Double DoubleAnimationUsingKeyFrames 離散、線形、スプライン
Int16 Int16AnimationUsingKeyFrames 離散、線形、スプライン
Int32 Int32AnimationUsingKeyFrames 離散、線形、スプライン
Int64 Int64AnimationUsingKeyFrames 離散、線形、スプライン
Matrix MatrixAnimationUsingKeyFrames 離散
Object ObjectAnimationUsingKeyFrames 離散
Point PointAnimationUsingKeyFrames 離散、線形、スプライン
Quaternion QuaternionAnimationUsingKeyFrames 離散、線形、スプライン
Rect RectAnimationUsingKeyFrames 離散、線形、スプライン
Rotation3D Rotation3DAnimationUsingKeyFrames 離散、線形、スプライン
Single SingleAnimationUsingKeyFrames 離散、線形、スプライン
String StringAnimationUsingKeyFrames 離散
Size SizeAnimationUsingKeyFrames 離散、線形、スプライン
Thickness ThicknessAnimationUsingKeyFrames 離散、線形、スプライン
Vector3D Vector3DAnimationUsingKeyFrames 離散、線形、スプライン
Vector VectorAnimationUsingKeyFrames 離散、線形、スプライン

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

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

<InterpolationMethod><Type>KeyFrame

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

キー フレームの主な目的は、KeyTime と Valueを指定することです。 すべての種類のキー フレームには、次の 2 つのプロパティがあります。

  • Value プロパティは、そのキー フレームのターゲット値を指定します。

  • KeyTime プロパティは、キー フレームの Duration に達するタイミング (アニメーションの Value 内で) を指定します。

キー フレーム アニメーションが開始されると、KeyTime プロパティによって定義された順序でキー フレームが反復処理されます。

  • 時刻 0 にキー フレームがない場合は、ターゲット プロパティの現在の値と最初のキー フレームの Value の間を遷移するアニメーションが作成されます。それ以外の場合は、アニメーションの出力値が最初のキー フレームの値になります。

  • 2 つ目のキーフレームに指定された補間方式を使用して、1 つ目と 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="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 に遷移する場合、アニメーションは、指定された時間に次の値を出力します。

時刻 出力値
0 0
1 2
2 4
3 6
4 8
4.25 8.5
4.5 9
5 10

離散補間

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

時刻 出力値
0 0
1 0
2 0
3 0
4 0
4.25 0
4.5 0
5 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 を指定して、以下のベジエ曲線を作成します。

2 つ目のベジエ曲線の例。
制御点が (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 を使用します。

Uniform キー時刻は、使用可能な時間をキー フレームの数で均等に除算して、各キー フレームの終了時刻を決定します。 次の例は、継続時間が 10 秒で、キー時刻が Uniform として指定されている 4 つのキー フレームがあるアニメーションを示しています。

  • 最初のキー フレームは、最初の 2.5 秒間で基準値から 100 までアニメーション化され、時刻 = 0:0:2.5 で終わります。

  • 2 番目のキー フレームは、100 から 200 までアニメーション化されます。 最初のキー フレームが終わった時点で開始され (時刻 = 0:0: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:10 で終わります。

<!-- 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. TimeSpanKeyTime の値を解決します。

  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 値を解決します。 PacedKeyTime は、隣接するキー フレームの KeyTime 値を使用して、解決時間を決定します。 目標は、アニメーションの速度がこのキー フレームの解決時間近くで一定であることを保証することです。

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

関連項目