キー フレーム アニメーションの概要Key-Frame Animations Overview

このトピックでは、キー フレーム アニメーションの概要を説明します。This topic introduces you to key-frame animations. キー フレーム アニメーションでは、3 つ以上のターゲット値を使用してアニメーション化することができ、アニメーションの補間方式を制御できます。Key-frame animations enable you to animate using more than two target values, and control an animation's interpolation method.

必須コンポーネントPrerequisites

この概要を理解するのには、Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) アニメーションとタイムラインを理解しておく必要があります。To understand this overview, you should be familiar with Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) animations and timelines. アニメーションの概要については、「アニメーションの概要」を参照してください。For an introduction to animations, see the Animation Overview. さらに、From/To/By アニメーションについて理解しておくと役に立ちます。It also helps to be familiar with From/To/By animations. 詳細については、「From/To/By アニメーションの概要」を参照してください。For more information, see the From/To/By Animations Overview.

キー フレーム アニメーションとはWhat is a Key-Frame Animation?

From/To/By アニメーションと同じように、キー フレーム アニメーションも、ターゲット プロパティの値をアニメーション化します。Like a From/To/By animation, a key-frame animation animates the value of a target property. 経由でターゲット値間の遷移を作成、Durationします。It creates a transition among its target values over its Duration. ただし、From/To/By アニメーションは 2 つの値の間の遷移を作成しますが、キー フレーム アニメーションは、任意の数のターゲット値の間の遷移を作成できます。However, while a From/To/By animation creates a transition between two values, a single key-frame animation can create transitions among any number of target values. From/To/By アニメーションとは異なり、キー フレーム アニメーションには、ターゲット値を設定する From、To、または By プロパティはありません。Unlike a From/To/By animation, a key frame animation has no From, To, or By properties with which to set its target values. キー フレーム アニメーションのターゲット値は、キー フレーム オブジェクトを使用して記述されます (このため、"キー フレーム アニメーション" という用語が使用されます)。A key-frame animation's target values are described using key frames objects (hence the term, "key-frame animation"). アニメーションのターゲット値を指定するキー フレーム オブジェクトを作成して、アニメーションに追加KeyFramesコレクション。To specify the animation's target values, you create key frame objects and add them to the animation's KeyFrames collection. アニメーションを実行すると、アニメーションが指定したフレームの間で遷移します。When the animation runs, it transitions between the frames you specified.

複数のターゲット値のサポートに加え、一部のキー フレーム メソッドでは、複数の補間方式もサポートします。In addition to supporting multiple target values, some key-frame methods even support multiple interpolation methods. アニメーションの補間方式は、1 つの値から次の値にどのように遷移するかを定義します。An animation's interpolation method defines how it transitions from one value to the next. 補間には、離散、線形、およびスプラインの 3 つの種類があります。There are three types of interpolations: discrete, linear, and splined.

キー フレーム アニメーションをアニメーション化するには、次の手順を完了します。To animate with a key-frame animation, you complete the following steps.

  • アニメーションを宣言し、指定のDurationによって/アニメーションの場合と同様、します。Declare the animation and specify its Duration, just like you would for a from/to/by animation.

  • 各ターゲット値の適切な型のキー フレームを作成、その値を設定し、KeyTimeに、アニメーションの追加とKeyFramesコレクション。For each target value, create a key frame of the appropriate type, set its value and KeyTime, and add it to the animation's KeyFrames collection.

  • From/To/By アニメーションと同じように、アニメーションをプロパティに関連付けます。Associate the animation with a property, just like you would with a From/To/By animation. ストーリーボードを使用したアニメーションのプロパティへの適用の詳細については、「ストーリー ボードの概要」を参照してください。For more information about applying an animation to a property using a storyboard, see Storyboards Overview.

次の例では、DoubleAnimationUsingKeyFramesをアニメーション化する、Rectangle要素を次の 4 つの異なる場所にします。The following example uses a DoubleAnimationUsingKeyFrames to animate a Rectangle element to four different locations.

<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/に/By などのアニメーション、キー フレーム アニメーションを使用して、プロパティに適用できる、Storyboardマークアップとコードでまたはを使用して、BeginAnimationコード内のメソッド。Like a From/To/By animation, a key-frame animation can be applied to a property by using a Storyboard in markup and code or by using the BeginAnimation method in code. 作成するキー フレーム アニメーションを使用することも、AnimationClockを 1 つまたは複数のプロパティに適用します。You may also use a key-frame animation to create an AnimationClock and apply it to one or more properties. アニメーションを適用するためのさまざまなメソッドの詳細については、「プロパティ アニメーションの手法の概要」を参照してください。For more information about the different methods for applying animations, see the Property Animation Techniques Overview.

キー フレーム アニメーションの種類Key-Frame Animation Types

アニメーションはプロパティ値を生成するため、プロパティの型ごとに異なるアニメーションの種類があります。Because animations generate property values, there are different animation types for different property types. 受け取るプロパティをアニメーション化する、 Double (要素のなどWidthプロパティ)、生成するアニメーションを使用するDouble値。To animate a property that takes a Double (such as an element's Width property), you use an animation that produces Double values. 受け取るプロパティをアニメーション化する、Pointを生成するアニメーションを使用するPoint値、という具合です。To animate a property that takes a Point, you use an animation that produces Point values, and so on.

属している、キー フレーム アニメーション クラス、System.Windows.Media.Animation名前空間と、次の名前付け規則に従います。The key-frame animation classes belong to the System.Windows.Media.Animation namespace and adhere to the following naming convention:

<Type> AnimationUsingKeyFrames<Type> AnimationUsingKeyFrames

ここで、<Type> は、クラスがアニメーション化する値の型です。Where <Type> is the type of value that the class animates.

WPFWPF は、次のキー フレーム アニメーション クラスを提供します。provides the following key-frame animation classes.

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

ターゲット値 (キー フレーム) とキー時刻Target Values (key frames) and Key Times

さまざまな種類のプロパティをアニメーション化するための多様な種類のキー フレーム アニメーションがあるように、さまざまな種類のキー フレーム オブジェクトがあります (アニメーション化される値の型とサポートされる補間方式ごとに 1 種類のオブジェクト)。Just as there are different types of key-frame animations for animating different property types, there are also different types of key frame objects: one for each type of value animated and interpolation method supported. キー フレームの種類は、次の名前付け規則に従います。Key frame types adhere to the following naming convention:

<InterpolationMethod><Type> KeyFrame<InterpolationMethod><Type> KeyFrame

ここで、<InterpolationMethod> は、キー フレームで使用される補間方式であり、<Type> は、クラスがアニメーション化する値の型です。Where <InterpolationMethod> is the interpolation method the key frame uses and <Type> is the type of value that the class animates. 3 つの補間方式のすべてをサポートするキー フレーム アニメーションでは、3 種類のキー フレームを使用できます。A key-frame animation that supports all three interpolation methods will have three key frame types that you can use. たとえば、キー フレームの 3 種類を使用することができます、 DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrameLinearDoubleKeyFrame、およびSplineDoubleKeyFrameします。For example, you can use three key frame types with a DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, and SplineDoubleKeyFrame. (補間方式については、後のセクションで詳しく説明します)。(Interpolation methods are described in detail in a later section.)

キー フレームの主な目的は、指定する、KeyTimeValueします。The primary purpose of a key frame is to specify a KeyTime and a Value. すべての種類のキー フレームには、次の 2 つのプロパティがあります。Every key frame type provides these two properties.

  • Valueプロパティがそのキー フレームのターゲット値を指定します。The Value property specifies the target value for that key-frame.

  • KeyTimeプロパティでは、タイミングを指定します (アニメーションの内Duration) キー フレームのValueに到達します。The KeyTime property specifies when (within the animation's Duration) a key frame's Value is reached.

キー フレーム アニメーションの開始時に、によって定義された順序でキー フレームを反復処理、KeyTimeプロパティ。When a key frame animation begins, iterates through its key frames in the order defined by their KeyTime properties.

  • アニメーションが、ターゲット プロパティの現在の値の間の遷移を作成する時間が 0 のキー フレームがない場合は、およびValue最初のキー フレームのそれ以外の場合、アニメーションの出力値の最初のキー フレームの値になります。If there is no key frame at time 0, the animation creates a transition between the target property's current value and the Value of the first key frame; otherwise, the animation's output value becomes the value of the first key frame.

  • アニメーションの間の遷移が作成されます、 Value 2 番目のキー フレームで指定された補間メソッドを使用して、最初と 2 番目キー フレームの。The animation creates a transition between the Value of the first and second key frames using the interpolation method specified by the second key frame. 最初のキー フレームからの移行が開始KeyTimeは終了と 2 番目のキー フレームのKeyTimeに到達します。The transition starts at the first key frame's KeyTime and ends when the second key frame's KeyTime is reached.

  • アニメーションは、前後のキー フレームの間の遷移を作成しながら続行されます。The animation continues, creating transitions between each subsequent key frame and its preceding key frame.

  • 最後に、最も大きなキー時刻をキー フレームの値にアニメーション遷移またはであると等しく、アニメーションのより小さいDurationします。Finally, the animation transitions to the value of the key frame with the greatest key time that is equal to or smaller than the animation's Duration.

場合、アニメーションのDurationAutomaticまたはそのDurationの最後のキー フレーム アニメーションの終了時刻と同じです。If the animation's Duration is Automatic or its Duration is equal to the time of the last key frame, the animation ends. の場合、アニメーションのDurationが最後のキー フレーム アニメーション保留リストの末尾に到達するまで、キー フレーム値のキー時刻よりも大きい、Durationします。Otherwise, if the animation's Duration is greater than the key time of the last key frame, the animation holds the key frame value until it reaches the end of its Duration. すべてのアニメーションのように、キー フレーム アニメーションを使用してそのFillBehaviorかどうかを保持する最終的な値に達すると、アクティブな期間の終了を決定するプロパティ。Like all animations, a key-frame animation uses its FillBehavior property to determine whether it holds it final value when it reaches the end of its active period. 詳細については、「タイミング動作の概要」を参照してください。For more information, see the Timing Behaviors Overview.

次の例では、DoubleAnimationUsingKeyFramesオブジェクトを示すために前の例で定義されている方法、ValueKeyTimeプロパティ。The following example uses the DoubleAnimationUsingKeyFrames object defined in the preceding example to demonstrate how the Value and KeyTime properties work.

  • 最初のキー フレームは、アニメーションの出力値をただちに 0 に設定します。The first key frame immediately sets the animation's output value to 0.

  • 2 番目のキー フレームは、0 から 350 までアニメーション化されます。The second key frame animates from 0 to 350. 最初のキー フレームが終わった時点で開始され (時刻 = 0 秒)、2 秒間再生され、時刻 = 0:0:2 で終わります。It starts after the first key frame ends (at time = 0 seconds) and plays for 2 seconds, ending at time = 0:0:2.

  • 3 番目のキー フレームは、350 から 50 までアニメーション化されます。The third key frame animates from 350 to 50. 2 番目のキー フレームが終わった時点で開始され (時刻 = 2 秒)、5 秒間再生され、時刻 = 0:0:7 で終わります。It starts when the second key frame ends (at time = 2 seconds) and plays for 5 seconds, ending at time = 0:0:7.

  • 4 番目のキー フレームは、50 から 200 までアニメーション化されます。The fourth key frame animates from 50 to 200. 3 番目のキー フレームが終わった時点で開始され (時刻 = 7 秒)、1 秒間再生され、時刻 = 0:0:8 で終わります。It starts when the third key frame ends (at time = 7 seconds) and plays for 1 second, ending at time = 0:0:8.

  • Durationアニメーションのプロパティが 10 秒に設定された、アニメーションが終了する前に 2 秒間、最終的な値を保持している時刻 = 0:0:10。Because the Duration property of the animation was set to 10 seconds, the animation holds its final value for two seconds before ending at time = 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>

補間方式Interpolation Methods

前のセクションで、一部のキー フレーム アニメーションでは複数の補間方式がサポートされることに言及しました。The preceding sections mentioned that some key-frame animations support multiple interpolation methods. アニメーションの補間は、その継続時間中にアニメーションがどのように遷移するかを表します。An animation's interpolation describes how an animation transitions between values over its duration. アニメーションで使用するキー フレームの種類を選択することで、そのキー フレーム セグメントの補間方式を定義できます。By selecting which key frame type you use with your animation, you can define the interpolation method for that key frame segment. 補間方式には、線形、離散、およびスプラインの 3 つの種類があります。There are three different types of interpolation methods: linear, discrete, and splined.

線形補間Linear Interpolation

線形補間では、アニメーションは、セグメントの継続期間中、一定の率で進行します。With linear interpolation, the animation progresses at a constant rate of the segment duration. たとえば、キー フレーム セグメントが 5 秒間で 0 から 10 に遷移する場合、アニメーションは、指定された時間に次の値を出力します。For example, if a key frame segment transitions from 0 to 10 over a duration of 5 seconds, the animation will output the following values at the specified times:

時刻Time 出力値Output value
00 00
11 22
22 44
33 66
44 88
4.254.25 8.58.5
4.54.5 99
55 1010

離散補間Discrete Interpolation

離散補間では、アニメーション関数は、1 つの値から次の値に補間なしでジャンプします。With discrete interpolation, the animation function jumps from one value to the next without interpolation. キー フレーム セグメントが 5 秒間で 0 から 10 に遷移する場合、アニメーションは、指定された時間で次の値を出力します。If a key frame segment transitions from 0 to 10 over a duration of 5 seconds, the animation will output the following values at the specified times:

時間Time 出力値Output value
00 00
11 00
22 00
33 00
44 00
4.254.25 00
4.54.5 00
55 1010

アニメーションの出力値は、セグメント期間の最後の最後に達するまで変化しないことに注意してください。Notice how the animation does not change its output value until the very end of the segment duration.

スプライン補間はさらに複雑です。Splined interpolation is more complex. 次のセクションで説明します。It is described in the next section.

スプライン補間Splined Interpolation

スプライン補間を使用して、リアルなタイミング効果を実現できます。Splined interpolation can be used to achieve more realistic timing effects. アニメーションは現実世界で起こる効果を模倣するために使用されることが多いため、開発者は、オブジェクトの加速と減速を細かく制御し、タイミング セグメントを緻密に操作することが必要になる場合があります。Because animations are so often used to imitate effects that occur in the real world, developers might need fine control of the acceleration and deceleration of objects, and close manipulation of timing segments. スプライン キーフレームでは、スプライン補間を使用してアニメーション化できます。Spline key frames enable you to animate with splined interpolation. 他のキー フレームを使用して指定するValueKeyTimeします。With other key frames, you specify a Value and KeyTime. スプライン キー フレームを指定することも、KeySplineします。With a spline key frame, you also specify a KeySpline. 次の例はの単一のスプライン キー フレームをDoubleAnimationUsingKeyFramesします。The following example shows a single spline key frame for a DoubleAnimationUsingKeyFrames. 通知、KeySplineスプライン キー フレームを他の種類のキー フレームからさまざまな点であるプロパティ。Notice the KeySpline property; that's what makes a spline key frame different from the other types of key frames.

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

3 次ベジエ曲線は、開始点、終点、および 2 つの制御点によって定義されます。A cubic Bezier curve is defined by a start point, an end point, and two control points. KeySplineスプライン キー フレームのプロパティ (0, 0) から (1, 1) までベジエ曲線の 2 つのコントロール ポイントを定義します。The KeySpline property of a spline key frame defines the two control point of a Bezier curve that extends from (0,0) to (1,1). 最初の制御点は、ベジエ曲線の前半分の曲率を制御し、2 つ目の制御点は、後半分の曲率を制御します。The first control point controls the curve factor of the first half of the Bezier curve, and the second control point controls the curve factor of the second half of the Bezier segment. 結果として得られる曲線は、そのスプライン キー フレームの変化率を表します。The resulting curve describes the rate of change for that spline key frame. 曲線が急であればあるほど、キー フレームの値は急激に変化します。The steeper the curve, the faster the key frame changes its values. 曲線が平坦になると、キー フレームの値は緩やかに変化します。As the curve gets flatter, the key frame changes its values more slowly.

使用する場合がありますKeySplineを水またはボールなどの物理的な軌道をシミュレートするか、モーション アニメーションに他の「イーズイン」と「イーズアウト」効果を適用します。You might use KeySpline to simulate physical trajectories like falling water or bouncing balls, or apply other "ease in" and "ease out" effects to motion animations. 背景のフェードやコントロール ボタンの復帰などのユーザー操作効果では、スプライン補間を適用して、アニメーションの変化率を特定の方法で加速したり減速したりできます。For user interaction effects like background fades or control button rebound, you might apply splined interpolation to speed up or slow down the rate of change for an animation in a specific way.

次の例を指定します、KeySplineの 0, 1 1, 0、次のベジエ曲線が作成されます。The following example specifies a KeySpline of 0,1 1,0, which creates the following Bezier curve.

ベジエ曲線をA Bezier curve
制御点が (0.0, 1.0) および (1.0, 0.0) のキー スプラインA key spline with control points (0.0, 1.0) and (1.0, 0.0)

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

このキー フレームは、開始されると速いスピードでアニメーション化され、その後スピードが低下し、終了前に再びスピードが上がります。This key frame animates rapidly when it begins, slows down, and then speeds up again before it ends.

次の例を指定します、KeySplineの 0.5,0.25 0.75,1.0 は、次のベジエ曲線を作成します。The following example specifies a KeySpline of 0.5,0.25 0.75,1.0, which creates the following Bezier curve.

ベジエ曲線をA Bezier curve
制御点が (0.25, 0.5) および (0.75, 1.0) のキー スプラインA key spline with control points (0.25, 0.5) and (0.75, 1.0)

<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />

ベジエ曲線の曲率がほとんど変化しないため、このキー フレームは、ほぼ一定の率でアニメーション化され、最後の最後にわずかに減速します。Because the curvature of the Bezier curve changes very little, this key frame animates at an almost constant rate; it slows down somewhat toward its very end.

次の例では、DoubleAnimationUsingKeyFrames四角形の位置をアニメーション化します。The following example uses a DoubleAnimationUsingKeyFrames to animate the position of rectangle. DoubleAnimationUsingKeyFrames使用SplineDoubleKeyFrameオブジェクトの場合、各キー フレーム値の間の移行は、スプライン補間を使用します。Because the DoubleAnimationUsingKeyFrames uses SplineDoubleKeyFrame objects, the transition between each key frame value uses splined interpolation.

<!-- 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>

スプライン補間は理解するのが難しいことがあります。さまざまな設定で実験すると理解しやすくなります。Splined interpolation can be difficult to understand; experimenting with different settings can help. キー スプライン アニメーションのサンプルを使用して、キー スプライン値を変更し、その結果をアニメーションで確認することができます。The Key Spline Animation Sample enables you to change key spline values and see the result it has on an animation.

補間方式の組み合わせCombining Interpolation Methods

補間の種類が異なるキー フレームを 1 つのキー フレーム アニメーションで使用できます。You can use key frames with different interpolation types in a single key frame animation. 補間の種類が異なる 2 つのキー フレーム アニメーションが連続する場合は、2 番目のキー フレームの補間方式を使用して、最初の値から 2 番目の値への遷移が作成されます。When two key frame animations with different interpolations follow each other, the interpolation method of the second key frame is used to create the transition from the first value to the second.

次の例では、DoubleAnimationUsingKeyFramesを使用して線形、スプライン、および離散補間が作成されます。In the following example, a DoubleAnimationUsingKeyFrames is created that uses linear, splined, and discrete interpolation.

<!-- 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>

継続時間とキー時刻の詳細More about Duration and Key Times

キー フレーム アニメーションがあるその他のアニメーションと同様に、Durationプロパティ。Like other animations, key-frame animations have a Duration property. アニメーションを指定するだけでなくDuration、キー フレームごとにどの程度の時間が与えられるかを指定する必要があります。In addition to specifying the animation's Duration, you need to specify what portion of that duration is given to each key frame. 記述することで、これを行う、KeyTimeごとのアニメーションのキーフレームです。You do so by describing a KeyTime for each of the animation's key frames. 各キー フレームのKeyTimeそのキー フレームの終了を指定します。Each key frame's KeyTime specifies when that key frame ends.

KeyTimeプロパティはキー時間の再生時間を指定していません。The KeyTime property does not specify how long the key time plays. キー フレームが再生される時間の長さは、そのキー フレームの終了時刻、前のキー フレームの終了時刻、およびアニメーションの継続時間によって決まります。The amount of time a key frame plays is determined by when the key frame ends, when the previous key frame ended, and the animation's duration. 時刻の値の割合、または特殊な値として、キー時刻を指定する場合がありますUniformまたはPacedします。Key times may be specified as a time value, a percentage, or as the special values Uniform or Paced.

次の一覧で、キー時刻を指定するさまざまな方法について説明します。The following list describes the different ways of specifying key times.

TimeSpan 値TimeSpan Values

使用することがTimeSpan値を指定する、KeyTimeします。You may use TimeSpan values to specify a KeyTime. 値は、0 以上、アニメーションの継続時間以下にする必要があります。The value should be greater than or equal to 0 and less than or equal to the animation's duration. 次の例は、継続時間が 10 秒で、キー時刻が時刻値として指定されている 4 つのキー フレームがあるアニメーションを示しています。The following example shows an animation with a duration of 10 seconds and four key frames whose key times are specified as time values.

  • 最初のキー フレームは、最初の 3 秒間で基準値から 100 までアニメーション化され、時刻 = 0:0:03 で終わります。The first key frame animates from the base value to 100 over the first 3 seconds, ending at time = 0:0:03.

  • 2 番目のキー フレームは、100 から 200 までアニメーション化されます。The second key frame animates from 100 to 200. 最初のキー フレームが終わった時点で開始され (時刻 = 3 秒)、5 秒間再生され、時刻 = 0:0:8 で終わります。It starts after the first key frame ends (at time = 3 seconds) and plays for 5 seconds, ending at time = 0:0:8.

  • 3 番目のキー フレームは、200 から 500 までアニメーション化されます。The third key frame animates from 200 to 500. 2 番目のキー フレームが終わった時点で開始され (時刻 = 8 秒)、1 秒間再生され、時刻 = 0:0:9 で終わります。It starts when the second key frame ends (at time = 8 seconds) and plays for 1 second, ending at time = 0:0:9.

  • 4 番目のキー フレームは、500 から 600 までアニメーション化されます。The fourth key frame animates from 500 to 600. 3 番目のキー フレームが終わった時点で開始され (時刻 = 9 秒)、1 秒間再生され、時刻 = 0:0:10 で終わります。It starts when the third key frame ends (at time = 9 seconds) and plays for 1 second, ending at time = 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>

パーセント値Percentage Values

パーセント値では、アニメーションの割合でのキー フレームの終了を指定しますDurationします。A percentage value specifies that the key frame ends at some percentage of the animation's Duration. XAMLXAML では、後ろに % 記号が付いた数値として指定します。In XAMLXAML, you specify the percentage as a number followed by the % symbol. コードで使用する、FromPercentメソッドを渡して、Double割合を示します。In code, you use the FromPercent method and pass it a Double indicating the percentage. 値は、0 以上、100 パーセント以下にする必要があります。The value must be greater than or equal to 0 and less than or equal to 100 percent. 次の例は、継続時間が 10 秒で、キー時刻がパーセントとして指定されている 4 つのキー フレームがあるアニメーションを示しています。The following example shows an animation with a duration of 10 seconds and four key frames whose key times are specified as percentages.

  • 最初のキー フレームは、最初の 3 秒間で基準値から 100 までアニメーション化され、時刻 = 0:0:3 で終わります。The first key frame animates from the base value to 100 over the first 3 seconds, ending at time = 0:0:3.

  • 2 番目のキー フレームは、100 から 200 までアニメーション化されます。The second key frame animates from 100 to 200. 最初のキー フレームが終わった時点で開始され (時刻 = 3 秒)、5 秒間再生され、時刻 = 0:0:8 (0.8 * 10 = 8) で終わります。It starts after the first key frame ends (at time = 3 seconds) and plays for 5 seconds, ending at time = 0:0:8 (0.8 * 10 = 8).

  • 3 番目のキー フレームは、200 から 500 までアニメーション化されます。The third key frame animates from 200 to 500. 2 番目のキー フレームが終わった時点で開始され (時刻 = 8 秒)、1 秒間再生され、時刻 = 0:0:9 (0.9 * 10 = 9) で終わります。It starts when the second key frame ends (at time = 8 seconds) and plays for 1 second, ending at time = 0:0:9 (0.9 * 10 = 9).

  • 4 番目のキー フレームは、500 から 600 までアニメーション化されます。The fourth key frame animates from 500 to 600. 3 番目のキー フレームが終わった時点で開始され (時刻 = 9 秒)、1 秒間再生され、時刻 = 0:0:10 (1 * 10 = 10)で終わります。It starts when the third key frame ends (at time = 9 seconds) and plays for 1 second, ending at time = 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>

特殊な値 UniformSpecial Value, Uniform

使用Uniformタイミング、各キー フレームが同じ時間がかかる場合に使用します。Use Uniform timing when you want each key frame to take the same amount of time.

AUniformキー時刻を数値で除算使用可能な時間もの各キー フレームの終了時刻を決定するキー フレームの数。A Uniform key time divides the available time equally by the number of key frames to determine the end time of each key frame. 次の例では、期間が 10 秒のアニメーションとキーを持つが 4 つのキー フレームは、として指定Uniformします。The following example shows an animation with a duration of 10 seconds and four key frames whose key times are specified as Uniform.

  • 最初のキー フレームは、最初の 2.5 秒間で基準値から 100 までアニメーション化され、時刻 = 0:0:2.5 で終わります。The first key frame animates from the base value to 100 over the first 2.5 seconds, ending at time = 0:0:2.5.

  • 2 番目のキー フレームは、100 から 200 までアニメーション化されます。The second key frame animates from 100 to 200. 最初のキー フレームが終わった時点で開始され (時刻 = 0:0:2.5 秒)、2.5 秒間再生され、時刻 = 0:0:5 で終わります。It starts after the first key frame ends (at time = 2.5 seconds) and plays for approximately 2.5 seconds, ending at time = 0:0:5.

  • 3 番目のキー フレームは、200 から 500 までアニメーション化されます。The third key frame animates from 200 to 500. 2 番目のキー フレームが終わった時点で開始され (時刻 = 5 秒)、2.5 秒間再生され、時刻 = 0:0:7.5 で終わります。It starts when the second key frame ends (at time = 5 seconds) and plays for 2.5 seconds, ending at time = 0:0:7.5.

  • 4 番目のキー フレームは、500 から 600 までアニメーション化されます。The fourth key frame animates from 500 to 600. 2 番目のキー フレームが終わった時点で開始され (時刻 = 7.5 秒)、2.5 秒間再生され、時刻 = 0:0:10 で終わります。It starts when the second key frame ends (at time = 7.5 seconds) and plays for 2.5 seconds, ending at time = 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>

特殊な値 PacedSpecial Value, Paced

使用Paced一定の率でアニメーション化するときにタイムアウトします。Use Paced timing when you want to animate at a constant rate.

APacedキー時刻は、各フレームの継続時間を特定するキー フレームのそれぞれの長さに従って使用可能な時間を割り当てます。A Paced key time allocates the available time according to the length of each of the key frames to determine the duration of each frame. これにより、アニメーションの速さ (ペース) を一定に保つ動作が提供されます。This will provide the behavior that the velocity or pace of the animation remains constant. 次の例では、期間が 10 秒のアニメーションとキーを持つ倍、3 つのキー フレームは、として指定Pacedします。The following example shows an animation with a duration of 10 seconds and three key frames whose key times are specified as Paced.

<!-- 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% に設定されます。Note that, if the last key frame's key time is Paced or Uniform, its resolved key time will be set to 100 percent. マルチ フレーム アニメーションの最初のキー フレームが Paced の場合、解決されたキー時刻は 0 に設定されます If the first key frame in a multiframe animation is paced, its resolved key time will be set to 0. (キー フレーム コレクションにキー フレームが 1 つだけ含まれているときに、それが Paced が設定されたキー フレームの場合は、解決されたキー時刻は 100% に設定されます)。(If the key frame collection contains only a single key frame and it is a paced key frame, its resolved key time will be set to 100 percent.)

1 つのキー フレーム アニメーション内の異なるキー フレームで異なるキー時刻を使用できます。Different key frames within a single key frame animation may use different key time types.

キー時刻と順不同のキー フレームの組み合わせCombining Key Times, Out-Of-Order Key Frames

キー フレームを使用するには異なるKeyTime同じアニメーション内の型の値します。You can use key frames with different KeyTime value types in the same animation. さらに、キー フレームは再生する順序で追加することをお勧めしますが、それは必須ではありません。And, although it's recommended that you add key frames in the order in which they should play, it's not necessary. アニメーションとタイミング システムは、順不同のキー フレームを解決できます。The animation and timing system is capable of resolving out of order key frames. キー時刻が無効なキー フレームは無視されます。Key frames with invalid key times are ignored.

キー フレーム アニメーションのキー フレームのキー時刻が解決される手順を次に示します。The following list describes the procedure by which key times are resolved for a key-frame animation's key frames.

  1. 解決TimeSpanKeyTime値。Resolve TimeSpan KeyTime values.

  2. アニメーションの合計補間時間を決定します。これは、キー フレーム アニメーションが順方向の反復を完了するまでにかかる合計時間です。Determine the animation’s total interpolation time, the total time it takes the key-frame animation to complete a forward iteration.

    1. 場合、アニメーションのDurationないAutomaticまたはForever、合計補間時間は、アニメーションの値Durationプロパティ。If the animation's Duration is not Automatic or Forever, the total interpolation time is the value of the animation's Duration property.

    2. それ以外の場合、合計補間時間は最大TimeSpanKeyTime存在する場合に、キー フレームの間で指定された値。Otherwise, the total interpolation time is the largest TimeSpan KeyTime value specified among its key frames, if any exist.

    3. それ以外の場合、合計補間時間は 1 秒間です。Otherwise, the total interpolation time is 1 second.

  3. 解決するのには、合計補間の時刻の値を使用してPercentKeyTime値。Use the total interpolation time value to resolve Percent KeyTime values.

  4. 前の手順で解決されていなければ、最後のキー フレームを解決します。Resolve last key frame, if it wasn't already resolved in the previous steps. 場合、KeyTimeキー フレームは、前回のUniformまたはPaced、解決時間、合計補間時間に等しくなります。If the KeyTime of the last key frame is Uniform or Paced, its resolved time will be equal to the total interpolation time.

    場合、KeyTimeの最初のキー フレームがPacedこのアニメーションが複数のキー フレームは、解決するには、そのKeyTime1 つのキー フレームがある場合は、値 0 をそのKeyTime値はPacedは合計値に解決されます前の手順で説明されている補間時間。If the KeyTime of the first key frame is Paced and this animation has more than on key frames, resolve its KeyTime value to zero; if there is only one key frame and its KeyTime value is Paced, it is resolved to the total interpolation time, as described in the preceding step.

  5. 残りの解決UniformKeyTime値: これらはそれぞれ指定を均等に利用可能な時間。Resolve remaining Uniform KeyTime values: they are each given an equal share of the available time. このプロセスの間の未解決PacedKeyTime値として扱われます一時的にUniformKeyTime値、および一時的な解決時間を取得します。During this process, unresolved Paced KeyTime values are temporarily treated as Uniform KeyTime values, and get a temporary resolved time.

  6. 解決するには、KeyTimeキー フレームの値では、解決、最も近くに宣言されているキー フレームを使用してキー時刻が指定されていないKeyTime値。Resolve the KeyTime values of key frames with unspecified key times by using the key frames declared nearest them that have resolved KeyTime values.

  7. 解決するには残りPacedKeyTime値。Resolve remaining Paced KeyTime values. Paced KeyTime 使用して、KeyTimeの近隣の値のキーを解決時間を決定します。Paced KeyTime use the KeyTime values of the neighboring key frames to determine their resolved time. 目標は、アニメーションの速度がこのキー フレームの解決時間近くで一定であることを保証することです。The goal is to ensure that the velocity of the animation is constant around this key frame's resolved time.

  8. つまり解決時間 (主キー) の順序と宣言 (セカンダリ キー) の順序でキー フレームを並べ替え、解決されたキー フレームに基づいて、使用して安定した並べ替えKeyTime値。Sort key frames in order of resolved time (primary key), and order of declaration (secondary key), i.e., use a stable sort based on the resolved key frame KeyTime values.

関連項目See also