키 프레임 애니메이션 개요
이 항목에서는 키 프레임 애니메이션에 대해 소개합니다. 키 프레임 애니메이션을 사용하면 세 개 이상의 대상 값을 사용하여 애니메이션 효과를 주고 애니메이션의 보간 방법을 제어할 수 있습니다.
이 항목에는 다음 단원이 포함되어 있습니다.
사전 요구 사항
키 프레임 애니메이션 사용
관련 항목
사전 요구 사항
이 개요를 이해하려면 Windows Presentation Foundation (WPF) 애니메이션 및 시간 표시 막대에 대해 잘 알고 있어야 합니다. 애니메이션에 대한 소개는 애니메이션 개요를 참조하십시오. 또한 From/To/By 애니메이션에 대해 익숙하면 이 내용을 이해하는 데 도움이 됩니다. 자세한 내용은 From/To/By 애니메이션 개요을 참조하십시오.
키 프레임 애니메이션
From/To/By 애니메이션처럼 키 프레임 애니메이션에서도 대상 속성 값에 애니메이션 효과를 줍니다. 해당 Duration 동안 대상 값 간에 전환되는 효과를 만듭니다. 그러나 From/To/By 애니메이션에서는 두 값 사이의 전환을 만드는 반면 단일 키 프레임 애니메이션에서는 원하는 수의 대상 값 사이에서 전환을 만듭니다. From/To/By 애니메이션과 달리 키 프레임 애니메이션에는 대상 값을 설정하는 데 사용하는 From, To 또는 By 속성이 없습니다. 키 프레임 애니메이션의 대상 값은 키 프레임 개체(이후에는 "키 프레임 애니메이션")를 사용하여 지정합니다. 애니메이션의 대상 값을 지정하려면 키 프레임 개체를 만들어 애니메이션의 KeyFrames 컬렉션에 추가합니다. 애니메이션을 실행하면 애니메이션이 지정한 프레임 간에 전환됩니다.
일부 키 프레임 방법에서는 여러 대상 값을 지원하는 것뿐 아니라 여러 보간 방법도 지원합니다. 애니메이션의 보간 방법에서는 애니메이션이 한 값에서 다음 값으로 전환되는 방식을 정의합니다. 세 가지의 보간 형식으로 discrete, linear 및 splined가 있습니다.
키 프레임 애니메이션을 사용하여 애니메이션 효과를 주려면 다음 단계를 수행합니다.
From/To/By 애니메이션처럼 애니메이션을 선언하고 Duration을 지정합니다.
각 대상 값에 대해 적절한 형식의 키 프레임을 만들고 해당 값 및 KeyTime을 설정한 다음 애니메이션의 KeyFrames 컬렉션에 추가합니다.
From/To/By 애니메이션처럼 애니메이션을 속성과 연결합니다. 스토리보드를 사용하여 속성에 애니메이션을 적용하는 방법에 대한 자세한 내용은 Storyboard 개요를 참조하십시오.
다음 예제에서는 DoubleAnimationUsingKeyFrames를 사용하여 Rectangle 요소에 애니메이션 효과를 주어 네 개의 다른 위치로 움직입니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
From/To/By 애니메이션처럼 키 프레임 애니메이션도 태그 및 코드에서 Storyboard를 사용하거나 코드에서 BeginAnimation 메서드를 사용하여 속성에 적용할 수 있습니다. 또한 키 프레임 애니메이션을 사용하여 AnimationClock을 만들고 하나 이상의 속성에 적용할 수 있습니다. 애니메이션을 적용하는 다양한 방법에 대한 자세한 내용은 속성 애니메이션 기술 개요를 참조하십시오.
키 프레임 애니메이션 형식
애니메이션은 속성 값을 생성하므로 속성 형식에 따라 애니메이션의 형식도 달라집니다. 요소의 Width 속성과 같이 Double을 사용하는 속성에 애니메이션 효과를 적용하려면 Double 값을 생성하는 애니메이션을 사용합니다. Point를 사용하는 속성에 애니메이션 효과를 적용하려면 Point 값 등을 생성하는 애니메이션을 사용합니다.
키 프레임 애니메이션 클래스는 System.Windows.Media.Animation 네임스페이스에 속하며 다음 명명 규칙을 따릅니다.
*<Type>*AnimationUsingKeyFrames
여기서 *<Type>*은 클래스가 애니메이션 효과를 주는 값의 형식입니다.
WPF에서는 다음과 같은 키 프레임 애니메이션 클래스를 제공합니다.
속성 형식 |
해당 From/To/By 애니메이션 클래스 |
지원되는 보간 방법 |
|---|---|---|
불연속 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속 |
||
불연속 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
||
불연속, 선형, 스플라인 |
대상 값(키 프레임) 및 키 시간
다른 속성 값에 애니메이션 효과를 적용하기 위해 서로 다른 형식의 키 프레임 애니메이션을 사용하는 것처럼 키 프레임 개체도 애니메이션 효과를 적용하는 값의 각 형식과 지원되는 보간 방법에 대해 서로 다른 형식을 사용합니다. 키 프레임 형식에서는 다음 명명 규칙을 따릅니다.
*<InterpolationMethod><Type>*KeyFrame
여기서 *<InterpolationMethod>*는 키 프레임에서 사용하는 보간 방법이고 *<Type>*은 클래스에서 애니메이션 효과를 적용하는 값의 형식입니다. 세 가지의 보간 방법을 모두 지원하는 키 프레임 애니메이션에서는 세 가지의 키 프레임 형식을 사용할 수 있습니다. 예를 들어 DoubleAnimationUsingKeyFrames에서는 DiscreteDoubleKeyFrame, LinearDoubleKeyFrame 및 SplineDoubleKeyFrame의 세 가지 키 프레임 형식을 사용할 수 있습니다. 보간 방법에 대해서는 뒷부분에 나오는 단원에서 자세히 설명합니다.
키 프레임의 주요 용도는 KeyTime 및 Value를 지정하는 것입니다. 모든 키 프레임 형식에서는 이 두 속성을 지정합니다.
키 프레임 애니메이션이 시작되면 해당 KeyTime 속성에서 정의한 순서대로 키 프레임이 반복됩니다.
시간 0에 키 프레임이 없으면 애니메이션에서 대상 속성의 현재 값과 첫 번째 키 프레임의 Value 간에 전환이 만들어지고, 그렇지 않으면 애니메이션의 출력 값이 첫 번째 키 프레임의 값이 됩니다.
애니메이션에서 두 번째 키 프레임으로 지정한 보간 방법을 사용하여 첫 번째 및 두 번째 키 프레임의 Value 간 전환을 만듭니다. 이 전환은 첫 번째 프레임의 KeyTime에서 시작되고 두 번째 키 프레임의 KeyTime에 도달하면 끝납니다.
애니메이션에서 계속해서 이후의 각 키 프레임과 그 앞의 키 프레임 간을 전환합니다.
마지막으로 키 시간이 가장 큰 키 프레임 즉, 애니메이션의 Duration보다 작거나 같은 키 프레임의 값으로 애니메이션이 전환됩니다.
애니메이션의 Duration이 Automatic이거나 Duration이 마지막 키 프레임의 시간과 동일한 경우 애니메이션이 끝납니다. 그렇지 않고 애니메이션의 Duration이 마지막 키 프레임의 키 시간보다 큰 경우 애니메이션이 Duration의 끝에 도달할 때까지 키 프레임 값을 보유합니다. 모든 애니메이션과 마찬가지로 키 프레임 애니메이션에서도 FillBehavior 속성을 통해 활성 기간의 끝에 도달할 때 최종 값을 보유할지 여부를 확인합니다. 자세한 내용은 타이밍 동작 개요을 참조하십시오.
다음 예제에서는 앞의 예제에서 정의한 DoubleAnimationUsingKeyFrames 개체를 사용하여 Value 및 KeyTime 속성의 작동 방식을 보여 줍니다.
첫 번째 키 프레임은 곧바로 애니메이션의 출력 값을 0으로 설정합니다.
두 번째 키 프레임은 0에서 350 사이에 애니메이션 효과를 적용합니다. 첫 번째 키 프레임이 끝난 후 시작되고(시간 = 0초) 2초 동안 재생된 다음 시간 0:0:2에 끝납니다.
세 번째 키 프레임은 350에서 50 사이에 애니메이션 효과를 적용합니다. 두 번째 키 프레임이 끝난 후 시작되고(시간 = 2초) 5초 동안 재생된 다음 시간 0:0:7에 끝납니다.
네 번째 키 프레임은 50에서 200 사이에 애니메이션 효과를 적용합니다. 세 번째 키 프레임이 끝난 후 시작되고(시간 = 7초) 1초 동안 재생된 다음 시간 0:0:8에 끝납니다.
애니메이션의 Duration 속성을 10초로 설정했으므로 애니메이션에서는 시간 0:0:10에 끝나기 전에 2초 동안 최종 값을 보유합니다.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
보간 방법
앞의 단원에서 일부 키 프레임 애니메이션은 여러 보간 방법을 지원한다고 설명했습니다. 애니메이션의 보간은 애니메이션에서 해당 지속 시간 동안 값 사이를 전환하는 방법을 말합니다. 애니메이션에서 사용할 키 프레임 형식을 선택하면 해당 키 프레임 세그먼트에 대한 보간 방법을 정의할 수 있습니다. 보간 방법에는 세 가지 형식으로 선형, 불연속 및 스플라인이 있습니다.
선형 보간
linear interpolation을 사용하면 애니메이션이 세그먼트 지속 시간의 일정 비율로 진행됩니다. 예를 들어 키 프레임 세그먼트가 5초의 지속 시간 동안 0에서 10 사이를 전환하면 애니메이션에서는 지정한 시간에 다음 값을 출력합니다.
시간 |
출력 값 |
|---|---|
0 |
0 |
1 |
2 |
2 |
4 |
3 |
6 |
4 |
8 |
4.25 |
8.5 |
4.5 |
9 |
5 |
10 |
불연속 보간
discrete interpolation을 사용하면 애니메이션 기능이 보간 없이 한 값에서 다음 값으로 이동합니다. 키 프레임 세그먼트가 5초의 지속 시간 동안 0에서 10 사이를 전환하면 애니메이션에서는 지정한 시간에 다음 값을 출력합니다.
시간 |
출력 값 |
|---|---|
0 |
0 |
1 |
0 |
2 |
0 |
3 |
0 |
4 |
0 |
4.25 |
0 |
4.5 |
0 |
5 |
10 |
애니메이션에서는 세그먼트 지속 시간의 끝에 도달할 때까지 출력 값을 변경하지 않습니다.
Splined interpolation은 좀 더 복잡합니다. 이 보간 방법에 대해서는 다음 단원에서 설명합니다.
스플라인 보간
스플라인 보간을 사용하면 더 실감나는 타이밍 효과를 얻을 수 있습니다. 애니메이션은 실제 세계에서 일어나는 효과를 모방하는 데 사용되는 경우가 많으므로 개발자는 개체의 가속 및 감속을 미세 조정하고 타이밍 세그먼트를 긴밀히 조작해야 할 수 있습니다. 스플라인 키 프레임을 사용하면 스프라인 보간과 함께 애니메이션 효과를 적용할 수 있습니다. 다른 키 프레임에서는 Value 및 KeyTime을 지정합니다. 또한 스플라인 키 프레임에서는 KeySpline도 지정합니다. 다음 예제에서는 DoubleAnimationUsingKeyFrames의 단일 스플라인 키 프레임을 보여 줍니다. KeySpline 속성이 바로 스플라인 키 프레임을 다른 형식의 키 프레임과 구별되게 만드는 속성입니다.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
cubic Bezier curve은 시작점과 끝점, 그리고 두 개의 제어점으로 정의됩니다. 스플라인 키 프레임의 KeySpline 속성은 (0,0)에서 (1,1)에 이르는 베지어 곡선의 제어점 두 개를 정의합니다. 첫 번째 제어점은 베지어 곡선의 처음 절반에 대한 곡선 인수를 제어하고, 두 번째 제어점은 베지어 세그먼트의 나머지 절반에 대한 곡선 인수를 제어합니다. 결과 곡선에서는 해당 스플라인 키 프레임의 변경 속도를 보여 줍니다. 곡선이 가파를수록 키 프레임의 값이 더 빠르게 변경됩니다. 곡선의 경사가 완만할수록 키 프레임의 값이 더 느리게 변경됩니다.
KeySpline을 사용하면 떨어지는 물이나 튀는 공과 같은 실제 궤도를 시뮬레이션하거나 동작 애니메이션에 "점점 가까이" 및 "점점 멀리" 효과를 적용할 수 있습니다. 배경 페이드나 컨트롤 단추 다시 바인딩과 같은 사용자 상호 작용 효과의 경우 스플라인 보간을 적용하여 애니메이션의 변경 속도를 특정 방식으로 높이거나 줄일 수 있습니다.
다음 예제에서는 KeySpline을 0,1 1,0으로 지정하여 다음과 같은 베지어 곡선을 만듭니다.
제어점 (0.0, 1.0) 및 (1.0, 0.0)을 사용한 키 스플라인
.png "3차원 곡선")
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
이 키 프레임의 애니메이션 효과는 시작할 때 빠르고 느려졌다가 끝나기 전에 다시 빨라집니다.
다음 예제에서는 KeySpline을 0.5,0.25 0.75,1.0으로 지정하여 다음과 같은 베지어 곡선을 만듭니다.
제어점 (0.25, 0.5) 및 (0.75, 1.0)을 사용한 키 스플라인
.png "3차원 곡선")
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
베지어 곡선의 곡률이 거의 변경되지 않으므로 이 키 프레임의 애니메이션 효과는 거의 일정한 속도로 적용되다가 끝에 이르러 약간 느려집니다.
다음 예제에서는 DoubleAnimationUsingKeyFrames를 직사각형의 위치에 애니메이션 효과를 적용합니다. DoubleAnimationUsingKeyFrames에서는 SplineDoubleKeyFrame 개체를 사용하므로 각 키 프레임 값 사이의 전환에는 스플라인 보간이 사용됩니다.
<!-- This rectangle is animated using a key frame animation
with splined interpolation. -->
<Rectangle
Width="50"
Height="50"
Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="SplineAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="SplineAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:10" KeySpline="0.0,0.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
스플라인 보간은 이해하기 까다로울 수 있으므로 여러 설정을 실험해 보면 도움이 될 수 있습니다. Key Spline Animation 샘플에서는 키 스플라인 값을 변경하고 애니메이션에 미치는 영향을 확인할 수 있습니다.
보간 방법 조합
키 프레임을 사용할 때 하나의 키 프레임 애니메이션에서 여러 보간 유형을 함께 사용할 수 있습니다. 서로 다른 보간을 사용하는 두 개의 키 프레임 애니메이션이 이어지면 두 번째 키 프레임의 보간 방법을 사용하여 첫 번째 값에서 두 번째 값으로의 전환을 만듭니다.
다음 예제에서는 선형, 스플라인 및 불연속 보간을 사용하는 DoubleAnimationUsingKeyFrames를 만듭니다.
<!-- This rectangle is animated using a key frame animation
with a combination of interpolation methods. -->
<Rectangle
Width="50"
Height="50"
Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="ComboAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ComboAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"
KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
지속 시간 및 키 시간에 대한 추가 정보
다른 애니메이션과 마찬가지로 키 프레임 애니메이션에는 Duration 속성이 있습니다. 애니메이션의 Duration을 지정하는 동시에 해당 지속 시간의 어느 만큼을 각 키 프레임에 부여할 것인지 지정해야 합니다. 이렇게 하려면 각 애니메이션 키 프레임의 KeyTime을 지정합니다. 각 키 프레임의 KeyTime은 해당 키 프레임이 끝나는 시간을 지정합니다.
KeyTime 속성은 키 시간이 재생되는 길이는 지정하지 않습니다. 키 프레임이 재생되는 시간은 키 프레임이 끝나는 시간, 이전 키 프레임이 끝난 시간 및 애니메이션의 지속 시간에 따라 결정됩니다. 키 시간은 시간 값, 백분율, 특수 값(Uniform 또는 Paced) 등으로 지정할 수 있습니다.
다음 목록에서는 키 시간을 지정하는 여러 방법을 보여 줍니다.
TimeSpan 값
TimeSpan 값을 사용하여 KeyTime을 지정할 수 있습니다. 이 값은 0보다 크거나 같고 애니메이션의 지속 시간보다 작거나 같아야 합니다. 다음 예제에서는 지속 시간이 10초이고 키 시간을 시간 값으로 지정한 네 개의 키 프레임이 있는 애니메이션을 보여 줍니다.
첫 번째 키 프레임은 기준 값에서 100 사이에 처음 3초 동안 애니메이션 효과를 적용하며 시간 0:0:03에 끝납니다.
두 번째 키 프레임은 100에서 200 사이에 애니메이션 효과를 적용합니다. 첫 번째 키 프레임이 끝난 후 시작되고(시간 = 3초) 5초 동안 재생된 다음 시간 0:0:8에 끝납니다.
세 번째 키 프레임은 200에서 500 사이에 애니메이션 효과를 적용합니다. 두 번째 키 프레임이 끝난 후 시작되고(시간 = 8초) 1초 동안 재생된 다음 시간 0:0:9에 끝납니다.
네 번째 키 프레임은 500에서 600 사이에 애니메이션 효과를 적용합니다. 세 번째 키 프레임이 끝난 후 시작되고(시간 = 9초) 1초 동안 재생된 다음 시간 0:0:10에 끝납니다.
<!-- This rectangle is animated with KeyTimes using TimeSpan values.
Goes to 100 in the first 3 seconds, 100 to 200 in
the next 5 seconds, 300 to 500 in the next second,
and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform01"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
<LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
백분율 값
백분율 값은 키 프레임이 애니메이션 Duration의 일정 비율에 끝나도록 지정합니다. XAML에서는 백분율을 숫자로 지정하고 뒤에 % 기호를 붙입니다. 코드에서는 FromPercent 메서드를 사용하고 이 메서드에 백분율을 나타내는 Double을 전달합니다. 이 값은 0보다 크거나 같고 100%보다 작거나 같아야 합니다. 다음 예제에서는 지속 시간이 10초이고 키 시간을 백분율로 지정한 네 개의 키 프레임이 있는 애니메이션을 보여 줍니다.
첫 번째 키 프레임은 기준 값에서 100 사이에 처음 3초 동안 애니메이션 효과를 적용하며 시간 0:0:3에 끝납니다.
두 번째 키 프레임은 100에서 200 사이에 애니메이션 효과를 적용합니다. 첫 번째 키 프레임이 끝난 후 시작되고(시간 = 3초) 5초 동안 재생된 다음 시간 0:0:8(0.8 * 10 = 8)에 끝납니다.
세 번째 키 프레임은 200에서 500 사이에 애니메이션 효과를 적용합니다. 두 번째 키 프레임이 끝난 후 시작되고(시간 = 8초) 1초 동안 재생된 다음 시간 0:0:9(0.9 * 10 = 9)에 끝납니다.
네 번째 키 프레임은 500에서 600 사이에 애니메이션 효과를 적용합니다. 세 번째 키 프레임이 끝난 후 시작되고(시간 = 9초) 1초 동안 재생된 다음 시간 0:0:10(1 * 10 = 10)에 끝납니다.
<!-- Identical animation behavior to the previous rectangle
but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform02"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as Percentages. -->
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="200" KeyTime="80%" />
<LinearDoubleKeyFrame Value="500" KeyTime="90%" />
<LinearDoubleKeyFrame Value="600" KeyTime="100%" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
특수 값, Uniform
각 키 프레임이 동일한 시간을 사용하도록 하려면 Uniform 타이밍을 사용합니다.
Uniform 키 시간에서는 사용 가능한 시간을 키 프레임의 수로 균일하게 나누어 각 키 프레임의 종료 시간을 지정합니다. 다음 예제에서는 지속 시간이 10초이고 키 시간을 Uniform으로 지정한 네 개의 키 프레임이 있는 애니메이션을 보여 줍니다.
첫 번째 키 프레임은 기준 값에서 100 사이에 처음 2.5초 동안 애니메이션 효과를 적용하며 시간 0:0:2.5에 끝납니다.
두 번째 키 프레임은 100에서 200 사이에 애니메이션 효과를 적용합니다. 첫 번째 키 프레임이 끝난 후 시작되고(시간 = 2.5초) 약 2.5초 동안 재생된 다음 시간 0:0:5에 끝납니다.
세 번째 키 프레임은 200에서 500 사이에 애니메이션 효과를 적용합니다. 두 번째 키 프레임이 끝난 후 시작되고(시간 = 5초) 2.5초 동안 재생된 다음 시간 0:0:7.5에 끝납니다.
네 번째 키 프레임은 500에서 600 사이에 애니메이션 효과를 적용합니다. 두 번째 키 프레임이 끝난 후 시작되고(시간 = 7.5초) 2.5초 동안 재생된 다음 시간 0:0:1에 끝납니다.
<!-- This rectangle is animated with KeyTimes using Uniform values. -->
<Rectangle Height="50" Width="50" Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform03"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Uniform.
When a key time is set to "Uniform" the total allotted
time of the animation is divided evenly between key frames.
In this example, the total duration of the animation is
ten seconds and there are four key frames each of which
are set to "Uniform", therefore, the duration of each key frame
is 3.3 seconds (10/3). -->
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
특수 값, Paced
일정 속도로 애니메이션 효과를 적용하려면 Paced 타이밍을 사용합니다.
Paced 키 시간에서는 사용 가능한 시간을 각 키 프레임 길이에 따라 할당하여 각 프레임의 지속 시간을 지정합니다. 그러면 애니메이션의 속도를 일정하게 유지하는 동작이 만들어집니다. 다음 예제에서는 지속 시간이 10초이고 키 시간을 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%로 설정됩니다. 여러 프레임 애니메이션의 첫 번째 키 프레임이 Paced이면 확인된 키 시간이 0으로 설정됩니다. 키 프레임 컬렉션에 하나의 키 프레임만 포함되어 있고 Paced 키 프레임인 경우에는 확인된 키 시간이 100%로 설정됩니다.
하나의 키 프레임 애니메이션 내의 다른 키 프레임에서는 서로 다른 키 시간 형식을 사용할 수 있습니다.
키 시간, 순서가 잘못된 키 프레임 결합
키 프레임을 사용할 때 동일한 애니메이션에서 여러 KeyTime 값 형식을 사용할 수 있습니다. 그리고 키 프레임을 재생할 순서대로 추가하는 것이 좋지만 그렇게 하지 않아도 됩니다. 애니메이션 및 타이밍 시스템에서는 순서가 잘못된 키 프레임을 해결할 수 있습니다. 키 시간이 잘못된 키 프레임은 무시됩니다.
다음 목록에서는 키 프레임 애니메이션의 키 프레임에 대한 키 시간을 확인하는 절차를 보여 줍니다.
애니메이션의 총 보간 시간 즉, 키 프레임 애니메이션에서 정방향 반복을 완료하는 데 걸리는 총 시간을 확인합니다.
앞의 단계에서 확인하지 않은 경우 마지막 키 프레임을 확인합니다. 마지막 키 프레임의 KeyTime이 Uniform 또는 Paced이면 확인된 키 시간은 총 보간 시간과 동일합니다.
첫 번째 키 프레임의 KeyTime이 Paced이고 이 애니메이션에 두 개 이상의 키 프레임이 있으면 해당 KeyTime 값이 0으로 확인됩니다. 키 프레임이 하나뿐이고 해당 KeyTime 값이 Paced이면 앞의 단계에서 설명한 대로 이 값이 총 보간 시간으로 확인됩니다.
나머지 Uniform KeyTime 값을 확인합니다. 각 값에는 사용 가능한 시간의 동일한 몫이 할당됩니다. 이 프로세스 동안 확인되지 않은 Paced KeyTime 값은 임시로 Uniform KeyTime 값으로 처리되고 임시로 확인된 시간을 가집니다.
근처에 있는 키 프레임 중 KeyTime 값이 확인된 키 프레임을 사용하여 키 시간이 지정되지 않은 키 프레임의 KeyTime 값을 확인합니다.
나머지 Paced KeyTime 값을 확인합니다. Paced KeyTime에서는 이웃 키 프레임의 KeyTime 값을 사용하여 확인되지 않은 시간을 결정합니다. 목표는 키 프레임의 확인된 시간 주위에서 애니메이션 속도가 일정하도록 만드는 것입니다.
확인된 시간(기본 키)의 순서 및 선언(보조 키)의 순서대로 키 프레임을 정렬합니다. 즉, 확인된 키 프레임 KeyTime 값을 기준으로 한 안정적인 정렬을 사용합니다.