키 프레임 애니메이션 및 감속/가속 함수 애니메이션Key-frame animations and easing function animations

선형 키 프레임 애니메이션, KeySpline 값을 사용 하는 키 프레임 애니메이션 또는 감속/가속 함수는 거의 동일한 시나리오에 사용할 수 있는 세 가지 방법입니다. 즉, 좀 더 복잡 한 storyboarded 애니메이션을 만들고 시작 상태에서 끝 상태로 비선형 애니메이션 동작을 사용 합니다.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

Storyboarded 애니메이션 항목을 확인 해야 합니다.Make sure you've read the Storyboarded animations topic. 이 항목은 Storyboarded 애니메이션 에 설명 된 애니메이션 개념을 기반으로 하며 다시 이동 하지 않습니다.This topic builds on the animation concepts that were explained in Storyboarded animations and won't go over them again. 예를 들어 Storyboarded 애니메이션 은 애니메이션, storyboard를 리소스로, 타임 라인 속성 값 (예: Duration, fillbehavior등)을 대상으로 하는 방법을 설명 합니다.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. 특히 각 키 프레임 애니메이션 유형에는 키 프레임을 지정 하기 위한 불연속, 선형, 스플라인감속/가속 변형이 있습니다. KeyFrameSpecifically, each key-frame animation type has a Discrete, Linear, Spline and Easing variation of its KeyFrame class for specifying its key frames. 예를 들어 Double 을 대상으로 하 고 키 프레임을 사용 하는 애니메이션을 지정 하려면 DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrameEasingDoubleKeyFrame를 사용 하 여 키 프레임을 선언할 수 있습니다.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. 해당 은 해당 시간에도 도달 합니다.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 / To / By 없는 경우 From의에서로의를 실행 하는 방법과 비슷합니다.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. 원하는 경우 명시적 기간 을 설정할 수 있지만 사용자 고유의 키 프레임에서 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 Timeline / To / By 키 프레임 애니메이션 클래스도 타임 라인에서 파생 되기 때문에, 기간 외에도에서로의를 사용 하는 것과 같이 키 프레임 애니메이션에 대 한 모든 타임 라인 기반 속성을 설정할 수 있습니다.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:

  • System.windows.media.animation.timeline.autoreverse: 마지막 키 프레임에 도달 하면 프레임은 끝부터 반대 순서로 반복 됩니다.AutoReverse: once the last key frame is reached, the frames are repeated in reverse order from the end. 이렇게 하면 애니메이션의 명백한 기간이 두 배가 됩니다.This doubles the apparent duration of the animation.
  • Begintime: 애니메이션의 시작을 지연 시킵니다.BeginTime: delays the start of the animation. 프레임의 KeyTime 값에 대 한 타임 라인은 begintime 에 도달할 때까지 계산을 시작 하지 않으므로 프레임을 잘라낼 위험이 없습니다.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:
    • 이를 영구적으로 설정 하면 키 프레임 및 해당 타임 라인이 무한히 반복 됩니다.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.
    • 기간으로 설정 된 경우 타임 라인은 해당 시간에 도달할 때까지 반복 됩니다.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.
  • System.windows.media.animation.timeline.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 Storyboarded 애니메이션 항목에서 설명 하는 것 보다 더 간단한와 가장 비슷합니다.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 초 동안 약간 및 선형으로 확장 된 다음 사각형의 시작 높이가 두 배가 될 때까지 마지막 1 초 동안 빠르게 크기를 조정 하는 애니메이션을 실행 합니다.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 에 도달 하면 새 만 적용 됩니다.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.

참고

불연속 키 프레임은 Double, PointColor형식이 아닌 값에 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. 이 속성은 애니메이션의 가속을 설명 하는 베 지 어 곡선의 첫 번째 및 두 번째 제어점을 지정 합니다.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. 일반적으로 공백 또는 쉼표로 구분 된 네 개의 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. 이러한 값은 베 지 어 곡선의 두 제어점에 대 한 "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에서 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.

다음 예제에서는 애니메이션에 적용 되는 세 개의 다른 키 프레임을 보여 줍니다. 마지막 하나는 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). KeySpline에 적용 되는 문자열 "0.6, 0.0 0.9, 0.00"을 확인 합니다.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.

감속/가속 함수를 감속/가속 키 프레임에 적용 하려면 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.

이 예제에서는 CubicEaseBounceEase 를 연속 키 프레임으로 system.windows.media.animation.doubleanimation.to 에 적용 하 여 바운스 효과를 만듭니다.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 차원 좌표계에서 실제 물리를 시뮬레이션 하는 애니메이션을 생성 하는 데 유용 합니다.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. 프레임을 사용 / / 여 애니메이션으로 이러한 효과를 발생 시킬 수 있지만 이러한 효과에는 상당한 양의 작업이 소요 되며 애니메이션은 수학적 수식을 사용 하는 것 보다 정확도가 떨어집니다.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.

감속/가속 함수는 다음과 같은 세 가지 방법으로 애니메이션에 적용할 수 있습니다.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: rest에 도달할 때까지 앞뒤로 진동 하는 스프링과 유사한 애니메이션을 만듭니다.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) = tp 수식을 사용 하 여 가속 또는 감속 되는 애니메이션을 만듭니다. 여기서 p는 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.
  • 빠른 계산: 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 에는 해당 특정 BounceEase의 함수 오버 동작을 수정 하는 두 개의 속성 바운스Bounciness 가 있습니다.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 는 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 감속/가속 함수는에서로 설정 된 일반 범위 밖의 값을 에서 / 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에서 behavior로 예상 되는 것과 반대 방향으로 값을 변경 하 여 애니메이션을 시작 하 / 고 시작 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에서 / 애니메이션으로 적용 / 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 값이 애니메이션 기간 동안 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

Double, Point또는 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. 프레임 간에 값을 보간 가능성이 없기 때문에 개체 값을 사용 하 여 애니메이션 효과를 적용 하는 것은 다릅니다.Animating using Object values is different because there's no possibility of interpolating the values between the frames. 프레임의 KeyTime 에 도달 하면 애니메이션 된 값이 키 프레임의 에 지정 된 값으로 즉시 설정 됩니다.When the frame's KeyTime is reached, the animated value is immediately set to the value specified in the key frame's Value. 보간이 없으므로 ObjectAnimationUsingKeyFrames 키 프레임 컬렉션에서 사용 하는 키 프레임은 하나 뿐입니다. DiscreteObjectKeyFrame.Because there's no interpolation, there's only one key frame you use in the ObjectAnimationUsingKeyFrames key frames collection: DiscreteObjectKeyFrame.

자주 설정 하려는 개체 값을 특성 구문에서 을 채우는 문자열로 표현할 수 없기 때문에 DiscreteObjectKeyFrame 은 속성 요소 구문을 사용 하 여 설정 되는 경우가 많습니다.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 는 템플릿 속성이 브러시 리소스를 참조 하는 경우에 나타납니다.One place you'll see an ObjectAnimationUsingKeyFrames used in the default templates is when a template property references a Brush resource. 이러한 리소스는 값 뿐만 아니라 시스템 테마 (ThemeDictionaries)로 정의 된 리소스를 사용 하는 system.windows.media.solidcolorbrush> 개체입니다.These resources are SolidColorBrush objects, not just a Color value, and they use resources that are defined as system themes (ThemeDictionaries). TextBlock 과 같은 브러시형식 값에 직접 할당 될 수 있으며 간접 대상 지정을 사용할 필요가 없습니다.They can be assigned directly to a Brush-type value such as TextBlock.Foreground and don't need to use indirect targeting. 그러나 system.windows.media.solidcolorbrush>Double, Point또는 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. 표시 유형 열거형 상수를 사용 하는 표시 유형 속성을 설정 하는 방법을 확인 합니다.Note how it sets the Visibility property that takes a Visibility enumeration constant. 이 경우 특성 구문을 사용 하 여 값을 설정할 수 있습니다.In this case you can set the value using attribute syntax. 열거형 값 (예: "축소")을 사용 하 여 속성을 설정 하기 위해 열거형에서 정규화 되지 않은 상수 이름만 필요 합니다.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. 이는 여러 개체 값이 유용할 수 있는 예제 시나리오로 이미지의 값에 애니메이션 효과를 적용 하 여 "슬라이드 쇼" 애니메이션을 만드는 데 흥미로운 방법일 수 있습니다 .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.