キー フレーム アニメーションとイージング関数のアニメーションKey-frame animations and easing function animations

線形キー フレーム アニメーション、KeySpline 値を設定したキー フレーム アニメーション、イージング関数は、ほとんど同じシナリオを実現できる 3 種類の手法です。そのシナリオとは、開始状態から終了状態までの間に非線形のアニメーション動作を使う、やや複雑なストーリーボードに設定されたアニメーションの作成です。Linear key-frame animations, key-frame animations with a KeySpline value, or easing functions are three different techniques for approximately the same scenario: creating a storyboarded animation that's a bit more complex, and that uses a nonlinear animation behavior from a starting state to an end state.

前提条件Prerequisites

トピック「ストーリーボードに設定されたアニメーション」を読んでいること。Make sure you've read the Storyboarded animations topic. このトピックは、「ストーリーボードに設定されたアニメーション」で説明したアニメーションの概念を基に作成されています。その内容はここでは触れません。This topic builds on the animation concepts that were explained in Storyboarded animations and won't go over them again. 具体的には、「ストーリーボードに設定されたアニメーション」では、アニメーションのターゲットを設定する方法、リソースとしてのストーリーボード、DurationFillBehavior などの Timeline プロパティ値について紹介しています。For example, Storyboarded animations describes how to target animations, storyboards as resources, the Timeline property values such as Duration, FillBehavior, and so on.

キー フレーム アニメーションを使ったアニメーション化Animating using key-frame animations

キー フレーム アニメーションでは、アニメーション タイムラインに沿ってポイントに到達する複数のターゲット値を使うことができます。Key-frame animations permit more than one target value that is reached at a point along the animation timeline. つまり、キー フレームごとに異なる中間値も指定でき、到達した最後のキー フレームが最終的なアニメーション値になります。In other words, each key frame can specify a different intermediate value, and the last key frame reached is the final animation value. 複数の値を指定してアニメーション化を行うことで、より複雑なアニメーションを実現できます。By specifying multiple values to animate, you can make more complex animations. キー フレーム アニメーションでは、アニメーションの種類ごとに異なる KeyFrame サブクラスとして実装される、異なる補間ロジックを使うこともできます。Key-frame animations also enable different interpolation logic, which are each implemented as a different KeyFrame subclass per animation type. 具体的には、各種類のキー フレーム アニメーションには、キー フレームを指定するための KeyFrame クラスのバリエーションが 4 つ (DiscreteLinearSplineEasing) あります。Specifically, each key-frame animation type has a Discrete, Linear, Spline and Easing variation of its KeyFrame class for specifying its key frames. たとえば、Double をターゲットとし、キー フレームを使うアニメーションを指定するには、DiscreteDoubleKeyFrameLinearDoubleKeyFrameSplineDoubleKeyFrameEasingDoubleKeyFrame でキー フレームを宣言できます。For example, to specify an animation that targets a Double and uses key frames, you could declare key frames with DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrame, and EasingDoubleKeyFrame. 単一の KeyFrames コレクションに含まれるこれらすべての種類を使って、新しいキー フレームに到達するたびに補間を変更できます。You can use any and all of these types within a single KeyFrames collection, to change the interpolation each time a new key frame is reached.

補間の動作のために、各キー フレームはその KeyTime の時間に達するまで補間を制御します。For interpolation behavior, each key frame controls the interpolation until its KeyTime time is reached. その時点で、その Value にも達します。Its Value is reached at that time also. それ以上のキー フレームがある場合は、値はシーケンス内の次のキー フレームの開始値になります。If there are more key frames beyond, the value then becomes the starting value for the next key frame in a sequence.

アニメーションの開始時に、KeyTime が "0:0:0" のキー フレームがない場合、開始値はプロパティのアニメーション化されていない値になります。At the start of the animation, if no key frame with KeyTime of "0:0:0" exists, the starting value is whatever the non-animated value of the property is. これは、From がない場合の From/To/By アニメーションの動作方法と似ています。This is similar to how a From/To/By animation acts if there is no From.

キー フレーム アニメーションの継続時間は、いずれかのキー フレームに設定されている最も大きい KeyTime 値と暗黙的に等しくなります。The duration of a key-frame animation is implicitly the duration equal to the highest KeyTime value set in any of its key frames. 必要に応じて Duration を明示的に設定することもできますが、独自のキー フレームの KeyTime よりも短くならないように注意してください。アニメーションが途中で途切れることになります。You can set an explicit Duration if you want, but be careful it's not shorter than a KeyTime in your own key frames or you'll cut off part of the animation.

Duration 以外にも、From/To/By アニメーションの場合と同様に、Timeline ベースのすべてのプロパティをキー フレーム アニメーションに設定できます。キー フレーム アニメーション クラスも Timeline から派生しているためです。In addition to Duration, you can set all the Timeline based properties on a key-frame animation, like you can with a From/To/By animation, because the key-frame animation classes also derive from Timeline. それらを次に示します。These are:

  • AutoReverse: 最後のキー フレームに達すると、フレームが末尾から逆の順序で繰り返されます。AutoReverse: once the last key frame is reached, the frames are repeated in reverse order from the end. アニメーションの明確な継続時間が 2 倍になります。This doubles the apparent duration of the animation.
  • BeginTime: アニメーションの開始を遅らせます。BeginTime: delays the start of the animation. BeginTime に達するまで、フレーム内にある KeyTime 値のタイムラインはカウントを開始しないため、フレームがカットされる心配はありません。The timeline for the KeyTime values in the frames doesn't start counting until BeginTime is reached, so there's no risk of cutting off frames
  • FillBehavior: 最後のキー フレームに達したときの動作を制御します。FillBehavior: controls what happens when the last key frame is reached. FillBehavior はどの中間キー フレームにも影響しません。FillBehavior has no effect on any intermediate key frames.
  • RepeatBehavior:RepeatBehavior:
    • Forever に設定した場合、キー フレームとそのタイムラインが無限に繰り返されます。If set to Forever, then the key frames and their timeline repeat infinitely.
    • 反復回数に設定した場合、タイムラインはその回数だけ繰り返されます。If set to an iteration count, the timeline repeats that many times.
    • Duration に設定した場合、その時間に達するまでタイムラインが繰り返されます。If set to a Duration, the timeline repeats until that time is reached. このとき、キー フレーム シーケンスの途中でアニメーションが途切れる可能性があります (タイムラインの暗黙的な継続時間の整数ファクターではない場合)。This might truncate the animation part way through the key frame sequence, if it's not an integer factor of the timeline's implicit duration.
  • SpeedRatio (されません一般的に使用)SpeedRatio (not commonly used)

線形キー フレームLinear key frames

線形キー フレームの場合は、フレームの KeyTime に達するまで、値の単純な線形補間が行われます。Linear key frames result in a simple linear interpolation of the value until the frame's KeyTime is reached. この補間の動作は、トピック「ストーリーボードに設定されたアニメーション」で説明されている単純な From/To/By アニメーションに非常に類似しています。This interpolation behavior is the most similar to the simpler From/To/By animations described in the Storyboarded animations topic.

キー フレーム アニメーションで線形キー フレームを使って四角形の描画の高さをスケーリングする方法を以下に示します。Here's how to use a key-frame animation to scale the render height of a rectangle, using linear key frames. この例で実行するアニメーションでは、四角形の高さが最初の 4 秒間は線形にやや増加し、その後、四角形が当初の高さの 2 倍になるまで急速に拡大します。This example runs an animation where the height of the rectangle increases slightly and linearly for the first 4 seconds, then scales rapidly for the last second until the rectangle is double the starting height.

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
                <LinearDoubleKeyFrame Value="1.2" KeyTime="0:0:4"/>
                <LinearDoubleKeyFrame Value="2" KeyTime="0:0:5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>

離散キー フレームDiscrete key frames

離散キー フレームでは、補間を一切使いません。Discrete key frames don't use any interpolation at all. KeyTime に達すると、新しい Value が単純に適用されます。When a KeyTime is reached, the new Value is simply applied. アニメーション化される UI プロパティに応じて、"ジャンプ" するように見えるアニメーションになることがよくあります。Depending on which UI property is being animated, this often produces an animation that appears to "jump". これが、望みどおりのきれいな動作であることを確認してください。Be certain that this is the aesthetic behavior that you really want. 宣言するキー フレームの数を増やすことで明確なジャンプを最小限に抑えることができますが、スムーズなアニメーションが必要な場合は、線形キー フレームかスプライン キー フレームを使うことをお勧めします。You can minimize the apparent jumps by increasing the number of key frames you declare, but if a smooth animation is your goal, you might be better off using linear or spline key frames instead.

注意

離散キー フレームは、DoublePointColor 型ではない値を DiscreteObjectKeyFrame でアニメーション化するための唯一の手段です。Discrete key frames are the only way to animate a value that isn't of type Double, Point, and Color, with a DiscreteObjectKeyFrame. その詳しい内容については、このトピックの後半で説明します。We'll discuss this in more detail later in this topic.

スプライン キー フレームSpline key frames

スプライン キー フレームでは、値から値までの可変的な遷移を KeySpline プロパティの値に基づいて作成します。A spline key frame creates a variable transition between values according to the value of the KeySpline property. このプロパティは、ベジエ曲線の 1 つ目と 2 つ目の制御点を指定し、アニメーションの加速度を表します。This property specifies the first and second control points of a Bezier curve, which describes the acceleration of the animation. 基本的には、KeySpline は、時間に基づく関数の関係 (関数の時間グラフがそのベジエ曲線の図形となる) を定義するものです。Basically, a KeySpline defines a function-over-time relationship where the function-time graph is the shape of that Bezier curve. 通常は、スペースまたはコンマで区切った 4 つの Double 値を持つ XAML の短縮形の属性文字列で KeySpline 値を指定します。You typically specify a KeySpline value in a XAML shorthand attribute string that has four Double values separated by spaces or commas. これらの値は、ベジエ曲線の 2 つの制御点に対応する "X,Y" のペアです。These values are "X,Y" pairs for two control points of the Bezier curve. "X" は時間、"Y" は値に対する関数修飾子です。"X" is time and "Y" is the function modifier to the value. 各値は、必ず 0 と 1 の間 (両端を含む) である必要があります。Each value should always be between 0 and 1 inclusive. KeySpline に対する制御点を変更しない場合、0,0 から 1,1 までの直線は、線形補間の時間に基づく関数を表したものです。Without control point modification to a KeySpline, the straight line from 0,0 to 1,1 is the representation of a function over time for a linear interpolation. 制御点によってその曲線の図形が変化するため、スプライン アニメーションの時間に基づく関数の動作も変化します。Your control points change the shape of that curve and thus the behavior of the function over time for the spline animation. これはグラフで視覚的に確かめることをお勧めします。It's probably best to see this visually as a graph. ブラウザーで Silverlight キー スプライン ビジュアライザーのサンプルを実行すると、制御点によって曲線がどのように変化するかや、制御点を KeySpline 値として使ったときのサンプル アニメーションの動作を調べることができます。You can run the Silverlight key-spline visualizer sample in a browser to see how the control points modify the curve and how a sample animation runs when using it as a KeySpline value.

次の例は、アニメーションに適用される 3 種類のキー フレームを示しています。最後のキー フレームは、Double 値のキー スプライン アニメーションです (SplineDoubleKeyFrame)。This next example shows three different key frames applied to an animation, with the last one being a key spline animation for a Double value (SplineDoubleKeyFrame). 文字列 "0.6,0.0 0.9,0.00" が KeySpline に対して適用されていることに注目してください。Note the string "0.6,0.0 0.9,0.00" applied for KeySpline. これにより、アニメーションが最初はゆっくり動作するものの、KeyTime に達する直前で急速に速度を増す曲線となります。This produces a curve where the animation appears to run slowly at first but then rapidly reaches the value just before the KeyTime is reached.

<Storyboard x:Name="myStoryboard">
    <!-- 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" EnableDependentAnimation="True">

        <!-- Using a LinearDoubleKeyFrame, the rectangle moves 
            steadily from its starting position to 500 over 
            the first 3 seconds.  -->
        <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3"/>

        <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
            appears at 400 after the fourth second of the animation. -->
        <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4"/>

        <!-- Using a SplineDoubleKeyFrame, the rectangle moves 
            back to its starting point. The
            animation starts out slowly at first and then speeds up. 
            This KeyFrame ends after the 6th second. -->
        <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

イージング キー フレームEasing key frames

イージング キー フレームは、補間が適用され、補間の時間に基づく関数が複数の定義済みの数式によって制御されるキー フレームです。An easing key frame is a key frame where interpolation is being applied, and the function over time of the interpolation is controlled by several pre-defined mathematical formulas. スプライン キー フレームでは、一部の種類のイージング関数とほぼ同じ結果を得ることができるものの、スプラインでは再現できない BackEase などのイージング関数もあります。You can actually produce much the same result with a spline key frame as you can with some of the easing function types, but there are also some easing functions, such as BackEase, that you can't reproduce with a spline.

イージング関数をイージング キー フレームに適用するには、EasingFunction プロパティをそのキー フレームの XAML でプロパティ要素として設定します。To apply an easing function to an easing key frame, you set the EasingFunction property as a property element in XAML for that key frame. 値として、いずれかの種類のイージング関数のオブジェクト要素を指定します。For the value, specify an object element for one of the easing function types.

この例では、DoubleAnimation に対して CubicEase を適用し、さらに BounceEase を連続するキー フレームとして適用して、跳ね返りの効果を作成します。This example applies a CubicEase and then a BounceEase as successive key frames to a DoubleAnimation to create a bouncing effect.

<Storyboard x:Name="myStoryboard">
    <DoubleAnimationUsingKeyFrames Duration="0:0:10"
        Storyboard.TargetProperty="Height"
        Storyboard.TargetName="myEllipse">

        <!-- This keyframe animates the ellipse up to the crest 
            where it slows down and stops. -->
        <EasingDoubleKeyFrame Value="-300" KeyTime="00:00:02">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>

        <!-- This keyframe animates the ellipse back down and makes
            it bounce. -->
        <EasingDoubleKeyFrame Value="0" KeyTime="00:00:06">
            <EasingDoubleKeyFrame.EasingFunction>
                <BounceEase Bounces="5"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

これはイージング関数の一例に過ぎません。This is just one easing function example. 詳しくは、次のセクションをご覧ください。We'll cover more in the next section.

イージング関数Easing functions

イージング関数を使うと、独自の数式をアニメーションに適用することができます。Easing functions allow you to apply custom mathematical formulas to your animations. 数学演算は、2-D の座標系で実際の物理法則をシミュレートするアニメーションを作るうえで役立ちます。Mathematical operations are often useful to produce animations that simulate real-world physics in a 2-D coordinate system. たとえば、物体の跳ね返りや、ばねの動きを表現することができます。For example, you may want an object to realistically bounce or behave as though it were on a spring. キー フレームや From/To/By アニメーションを使って、類似した効果を表現することもできますが、膨大な作業が必要となり、完成したアニメーションも、数式を使った場合と比べると正確さに欠ける可能性があります。You could use key frame or even From/To/By animations to approximate these effects but it would take a significant amount of work and the animation would be less accurate than using a mathematical formula.

イージング関数は 3 とおりの方法でアニメーションに適用できます。Easing functions can be applied to animations in three ways:

一連のイージング関数を以下にまとめます。Here is a list of the easing functions:

  • BackEase:指定されたパスのアニメーションを開始する前に、少しアニメーションの動きは取り消します。BackEase: Retracts the motion of an animation slightly before it begins to animate in the path indicated.
  • BounceEase:バウンド効果を作成します。BounceEase: Creates a bouncing effect.
  • CircleEase:アニメーションを加速または減速円関数を使用して作成します。CircleEase: Creates an animation that accelerates or decelerates using a circular function.
  • CubicEase:アニメーションを加速または減速数式 f(t) を使用して作成 t3 を = です。CubicEase: Creates an animation that accelerates or decelerates using the formula f(t) = t3.
  • ElasticEase:スプリングが伸び縮みし静止するまでのようなアニメーションを作成します。ElasticEase: Creates an animation that resembles a spring oscillating back and forth until it comes to rest.
  • ExponentialEase:加速または指数式を使って減速するアニメーションを作成します。ExponentialEase: Creates an animation that accelerates or decelerates using an exponential formula.
  • PowerEase:アニメーションを加速または減速数式 f(t) を使用して作成 = p と等しい tp、 Power プロパティ。PowerEase: Creates an animation that accelerates or decelerates using the formula f(t) = tp where p is equal to the Power property.
  • QuadraticEase:アニメーションを加速または減速数式 f(t) を使用して作成 t2 を = です。QuadraticEase: Creates an animation that accelerates or decelerates using the formula f(t) = t2.
  • QuarticEase:アニメーションを加速または減速数式 f(t) を使用して作成 t4 を = です。QuarticEase: Creates an animation that accelerates or decelerates using the formula f(t) = t4.
  • QuinticEase:アニメーションを加速または減速数式 f(t) を使用して作成 t5 を = です。QuinticEase: Create an animation that accelerates or decelerates using the formula f(t) = t5.
  • SineEase:アニメーションを加速または減速正弦公式を使用して作成します。SineEase: Creates an animation that accelerates or decelerates using a sine formula.

一部のイージング関数には固有のプロパティがあります。Some of the easing functions have their own properties. たとえば、BounceEase には BouncesBounciness という 2 つのプロパティがあります。これらは、その特定の BounceEase の時間に基づく関数の動作を変更します。For example, BounceEase has two properties Bounces and Bounciness that modify the function-over-time behavior of that particular BounceEase. CubicEase など、その他のイージング関数は、すべてのイージング関数に共通の EasingMode プロパティ以外にプロパティはなく、生成される時間に基づく関数の動作は常に同じです。Other easing functions such as CubicEase don't have properties other than the EasingMode property that all easing functions share, and always produce the same function-over-time behavior.

これらのイージング関数の一部は、プロパティを持つイージング関数でのプロパティの設定方法に応じて、重複する場合があります。Some of these easing functions have a bit of overlap, depending on how you set properties on the easing functions that have properties. たとえば、QuadraticEase は、Power が 2 の PowerEase と完全に同じです。For example, QuadraticEase is exactly the same as a PowerEase with Power equal to 2. CircleEase は、基本的には既定値の ExponentialEase です。And CircleEase is basically a default-value ExponentialEase.

BackEase イージング関数は、キー フレームの From/To または値によって設定される通常の範囲外の値を変更できるため、特別な関数です。The BackEase easing function is unique because it can change the value outside of the normal range as set by From/To or values of key frames. 通常の From/To 動作とは逆の方向に値を変更することでアニメーションを開始し、From に戻るか、値をもう一度開始してから、アニメーションを通常どおり実行します。It starts the animation by changing the value in the opposite direction as would be expected from a normal From/To behavior, goes back to the From or starting value again, and then runs the animation as normal.

前の例で、キー フレーム アニメーションのイージング関数を宣言する方法を紹介しました。In an earlier example, we showed how to declare an easing function for a key-frame animation. 次の例では、イージング関数を From/To/By アニメーションに適用します。This next sample applies an easing function to a From/To/By animation.

<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                                Bounciness="2"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" Fill="Blue" Width="200" Height="30"/>
</StackPanel>

イージング関数が From/To/By アニメーションに適用されると、時間に基づく関数の特性 (アニメーションの Duration に基づいて値が From 値と To 値の間で補完されるしくみ) が変化します。When an easing function is applied to a From/To/By animation, it's changing the function- over-time characteristics of how the value interpolates between the From and To values over the Duration of the animation. イージング関数を使わない場合は、線形補間になります。Without an easing function, that would be a linear interpolation.

個々 のオブジェクトの値のアニメーションDiscrete object value animations

DoublePoint、または Color 型ではないプロパティにアニメーション化された値を適用する唯一の方法として、ある種類のアニメーションについて以下に説明します。One type of animation deserves special mention because it's the only way you can apply an animated value to properties that aren't of type Double, Point, or Color. それは、キー フレーム アニメーション ObjectAnimationUsingKeyFrames です。This is the key-frame animation ObjectAnimationUsingKeyFrames. Object 値を使ったアニメーション化は、フレーム間で値が補間される可能性がないため、これとは異なります。Animating using Object values is different because there's no possibility of interpolating the values between the frames. フレームの KeyTime に達すると、アニメーション化された値はキー フレームの Value に指定された値にすぐに設定されます。When the frame's KeyTime is reached, the animated value is immediately set to the value specified in the key frame's Value. 使用する 1 つだけのキー フレームが補間がないため、 ObjectAnimationUsingKeyFramesキー フレームのコレクション。DiscreteObjectKeyFrameします。Because there's no interpolation, there's only one key frame you use in the ObjectAnimationUsingKeyFrames key frames collection: DiscreteObjectKeyFrame.

プロパティ要素構文を使って DiscreteObjectKeyFrameValue が設定されることはよくあります。これは、設定を試みるオブジェクト値が、属性構文の Value を設定するための文字列として表現できない場合があるためです。The Value of a DiscreteObjectKeyFrame is often set using property element syntax, because the object value you are trying to set often is not expressible as a string to fill Value in attribute syntax. StaticResource などの参照を使う場合は、属性構文を利用できます。You can still use attribute syntax if you use a reference such as StaticResource.

既定のテンプレートで ObjectAnimationUsingKeyFrames が使われる状況として、テンプレート プロパティが Brush リソースを参照する場合が挙げられます。One place you'll see an ObjectAnimationUsingKeyFrames used in the default templates is when a template property references a Brush resource. このようなリソースは単なる Color 値ではなく SolidColorBrush オブジェクトであり、システム テーマとして定義されているリソース (ThemeDictionaries) を使います。These resources are SolidColorBrush objects, not just a Color value, and they use resources that are defined as system themes (ThemeDictionaries). これらのリソースは、TextBlock.Foreground などの Brush 型の値に直接割り当てることができ、間接的なターゲット設定を使う必要はありません。They can be assigned directly to a Brush-type value such as TextBlock.Foreground and don't need to use indirect targeting. ただし、SolidColorBrushDoublePoint、または Color ではないため、リソースを使うには ObjectAnimationUsingKeyFrames を利用する必要があります。But because a SolidColorBrush is not Double, Point, or Color, you have to use a ObjectAnimationUsingKeyFrames to use the resource.

<Style x:Key="TextButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <TextBlock x:Name="Text"
                        Text="{TemplateBinding Content}"/>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPointerOverForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPressedForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
...
                       </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

列挙値を使うプロパティをアニメーション化するために、ObjectAnimationUsingKeyFrames を使うこともできます。You also might use ObjectAnimationUsingKeyFrames to animate properties that use an enumeration value. 次に、Windows ランタイムの既定のテンプレートに含まれている名前付きスタイルの別の例を示します。Here's another example from a named style that comes from the Windows Runtime default templates. Visibility 列挙定数を列挙定数受け取る Visibility プロパティの設定方法に注目してください。Note how it sets the Visibility property that takes a Visibility enumeration constant. この場合は、属性構文を使って値を設定できます。In this case you can set the value using attribute syntax. 必要なのは、プロパティに "Collapsed" などの列挙値を設定するための列挙値からの非修飾定数名だけです。You only need the unqualified constant name from an enumeration for setting a property with an enumeration value, for example "Collapsed".

<Style x:Key="BackButtonStyle" TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Grid x:Name="RootGrid">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
...           <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame Value="Collapsed" KeyTime="0"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
...
          </VisualStateManager.VisualStateGroups>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

ObjectAnimationUsingKeyFrames フレーム セットに対して、複数の DiscreteObjectKeyFrame を使うことができます。You can use more than one DiscreteObjectKeyFrame for an ObjectAnimationUsingKeyFrames frame set. この方法は、複数のオブジェクト値が役立つサンプル シナリオで、Image.Source の値をアニメーション化して "スライド ショー" アニメーションを作成する際に検討することをお勧めします。This might be an interesting way to create a "slide show" animation by animating the value of Image.Source, as an example scenario for where multiple object values might be useful.