키 프레임 애니메이션 개요
이 항목에서는 키 프레임 애니메이션을 소개합니다. 키 프레임 애니메이션을 사용하면 두 개 이상의 대상 값을 사용하여 애니메이션 효과를 주고 애니메이션의 보간 방법을 제어할 수 있습니다.
필수 구성 요소
이 개요를 이해하려면 WPF(Windows Presentation Foundation) 애니메이션 및 타임라인을 잘 알고 있어야 입니다. 애니메이션 소개를 보려면 애니메이션 개요를 참조하세요. From/To/By 애니메이션을 잘 알고 있어도 도움이 됩니다. 자세한 내용은 From/To/By 애니메이션 개요를 참조하세요.
키 프레임 애니메이션이란?
From/To/By 애니메이션처럼 키 프레임 애니메이션도 대상 속성의 값에 애니메이션 효과를 줍니다. 이 애니메이션은 해당 Duration을 통해 대상 값 간에 전환을 생성합니다. 그러나 From/To/By 애니메이션은 두 값 사이에 전환을 만들지만 단일 키 프레임 애니메이션은 원하는 수의 대상 값 사이에 전환을 만들 수 있습니다. From/To/By 애니메이션과 달리, 키 프레임 애니메이션에는 해당 대상 값을 설정하는 데 사용할 From, To 또는 By 속성이 없습니다. 키 프레임 애니메이션의 대상 값은 키 프레임 개체를 사용하여 설명합니다(그래서 "키 프레임 애니메이션"이라고 지칭함). 애니메이션의 대상 값을 지정하려면 키 프레임 개체를 만들어 이 개체를 애니메이션의 KeyFrames 컬렉션에 추가합니다. 이 애니메이션은 실행될 때 지정된 프레임 간에 전환됩니다.
일부 키 프레임 메서드는 여러 대상 값을 지원할 뿐만 아니라 여러 보간 방법도 지원합니다. 애니메이션의 보간 방법은 한 값에서 다음 값으로 전환되는 방식을 정의합니다. 보간에는 불연속, 선형 및 스플라인의 세 가지 유형이 있습니다.
키 프레임 애니메이션으로 애니메이션 효과를 주려면 다음 단계를 완료합니다.
애니메이션을 선언하고 From/To/By 애니메이션의 경우와 마찬가지로 해당 Duration을 지정합니다.
각 대상 값에 대해 적절한 형식의 키 프레임을 만들고, 해당 값 및 KeyTime을 설정한 후 애니메이션의 KeyFrames 컬렉션에 추가합니다.
From/To/By 애니메이션의 경우처럼 애니메이션을 속성에 연결합니다. storyboard를 사용하여 속성에 애니메이션을 적용하는 방법에 대한 자세한 내용은 Storyboard 개요를 참조하세요.
다음 예제에서는 DoubleAnimationUsingKeyFrames를 사용하여 4개의 다른 위치에 대한 Rectangle 요소에 애니메이션 효과를 줍니다.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
From/To/By 애니메이션처럼 태그 및 코드에서 Storyboard를 사용하거나 또는 코드에서 BeginAnimation 메서드를 사용하여 하나의 속성에 키 프레임 애니메이션을 적용할 수 있습니다. 키 프레임 애니메이션을 사용하여 AnimationClock을 만든 후 하나 이상의 속성에 적용할 수도 있습니다. 애니메이션 효과를 주기 위한 여러 다양한 방법에 대한 자세한 내용은 속성 애니메이션 기술 개요를 참조하세요.
키 프레임 애니메이션 형식
애니메이션은 속성 값을 생성하므로 속성 형식이 다르면 애니메이션 형식도 다릅니다. Double을 사용하는 속성(예: 요소의 Width 속성)에 애니메이션 효과를 주려면 Double 값을 생성하는 애니메이션을 사용합니다. Point를 사용하는 속성에 애니메이션 효과를 주려면 Point 값 등을 생성하는 애니메이션을 사용합니다.
키 프레임 애니메이션 클래스는 System.Windows.Media.Animation 네임스페이스에 속하며 다음 명명 규칙을 따릅니다.
<Type>AnimationUsingKeyFrames
여기서 <Type>은 클래스가 애니메이션을 적용하는 값의 형식입니다.
WPF에서는 다음 키 프레임 애니메이션 클래스를 제공합니다.
대상 값(키 프레임) 및 키 시간
다양한 속성 형식에 애니메이션 효과를 주기 위한 다양한 형식의 키 프레임 애니메이션이 있는 것처럼, 애니메이션 효과가 적용되는 각 형식의 값 및 지원되는 보간 방법에 따라 다양한 형식의 키 프레임 개체가 사용됩니다. 키 프레임 형식은 다음과 같은 명명 규칙을 따릅니다.
<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="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>
보간 방법
이전 섹션에서는 일부 키 프레임 애니메이션이 여러 보간 방법을 지원한다고 언급했습니다. 애니메이션의 보간은 애니메이션이 지속 기간 동안 값 사이에서 전환되는 방식을 설명합니다. 애니메이션에서 사용하는 키 프레임 형식을 선택하여 해당 키 프레임 세그먼트에 대한 보간 방법을 정의할 수 있습니다. 보간 방법 종류에는 선형, 불연속 및 스플라인의 세 가지가 있습니다.
선형 보간
선형 보간을 사용하면 애니메이션이 세그먼트 기간에 일정한 속도로 진행됩니다. 예를 들어 키 프레임 세그먼트가 5초 동안 0에서 10으로 전환되면 애니메이션은 지정된 시간에 다음 값을 출력합니다.
| Time | 출력 값 |
|---|---|
| 0 | 0 |
| 1 | 2 |
| 2 | 4 |
| 3 | 6 |
| 4 | 8 |
| 4.25 | 8.5 |
| 4.5. | 9 |
| 5 | 10 |
불연속 보간
불연속 보간을 사용하면 애니메이션 함수가 보간 없이 한 값에서 다음 값으로 이동합니다. 키 프레임 세그먼트가 5초 동안 0에서 10으로 전환되면 애니메이션은 지정된 시간에 다음 값을 출력합니다.
| Time | 출력 값 |
|---|---|
| 0 | 0 |
| 1 | 0 |
| 2 | 0 |
| 3 | 0 |
| 4 | 0 |
| 4.25 | 0 |
| 4.5. | 0 |
| 5 | 10 |
세그먼트 기간의 거의 끝날 때까지 애니메이션이 출력 값을 변경하지 않는 방식을 살펴보세요.
스플라인 보간은 좀 더 복잡합니다. 이 방식은 다음 섹션에서 설명합니다.
스플라인 보간
스플라인 보간은 보다 실제적인 타이밍 효과를 얻기 위해 사용할 수 있습니다. 애니메이션은 실제 환경에서 발생하는 효과를 모방하는 데 주로 사용되므로 개발자는 개체의 가속 및 감속을 보다 세밀하게 제어하고 타이밍 세그먼트를 면밀히 조작해야 할 수 있습니다. 스플라인 키 프레임을 사용하면 스플라인 보간을 사용하여 애니메이션 효과를 줄 수 있습니다. 다른 키 프레임을 사용하여 Value 및 KeyTime을 지정합니다. 스플라인 키 프레임을 사용하면 KeySpline도 지정할 수 있습니다. 다음 예제에서는 DoubleAnimationUsingKeyFrames에 대한 단일 스플라인 키 프레임을 보여줍니다. KeySpline 속성 때문에 스플라인 키 프레임이 다른 형식의 키 프레임과 차별화됩니다.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
입방형 3차원 곡선은 시작점, 끝점 및 두 개의 제어점에 의해 정의됩니다. 스플라인 키 프레임의 KeySpline 속성은 (0,0)에서 (1,1)로 확장되는 베지어 곡선의 두 제어점을 정의합니다. 첫 번째 제어점은 3차원 곡선의 첫 번째 절반 부분에 대한 곡선 요소를 제어하 고 두 번째 제어점은 3차원 곡선의 두 번째 절반 부분에 대한 곡선 요소를 제어합니다. 결과 곡선은 해당 스플라인 키 프레임의 변동률을 설명합니다. 곡선이 더 가파를수록 키 프레임 값이 더 빠르게 변경됩니다. 곡선이 평평해지면 키 프레임은 값을 더 느리게 변경합니다.
KeySpline을 사용하여 떨어지는 물이나 튕기는 공과 같은 물리적 궤적을 시뮬레이트하거나 그 외 "점점 가까이" 및 "점점 멀리" 효과를 동작 애니메이션에 적용할 수 있습니다. 배경 페이드 또는 컨트롤 단추 리바운드와 같은 사용자 상호 작용 효과의 경우 스플라인 보간을 적용하여 특정한 방식으로 애니메이션의 변동률을 빠르게 하거나 느리게 할 수 있습니다.
다음 예제에서는 KeySpline으로 0,1 1,0을 지정합니다. 그러면 다음과 같은 베지어 곡선이 만들어집니다.
제어점 (0.0, 1.0) 및 (1.0, 0.0)을 갖는 키 스플라인
<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)을 갖는 키 스플라인
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
이 3차원 곡선의 곡률은 거의 변경되지 않으므로 이 키 프레임 애니메이션은 거의 일정한 속도를 유지하다가 끝에서는 다소 느려집니다.
다음 예제에서는 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>
스플라인 보간은 이해하기 어려울 수 있으므로 다른 설정을 사용해서 시험해보면 도움이 될 수 있습니다. 키 스플라인 애니메이션 샘플을 사용하여 키 스플라인 값을 변경하고 애니메이션에 나타나는 결과를 볼 수 있습니다.
보간 방법 조합
단일 키 프레임 애니메이션에서 여러 다른 보간 형식을 갖는 키 프레임을 사용할 수 있습니다. 다른 보간을 사용하는 두 개의 키 프레임 애니메이션이 서로를 따라 진행되면 두 번째 키 프레임의 보간 방법이 첫 번째 값에서 두 번째 값으로의 전환을 만드는 데 사용됩니다.
다음 예제에서는 선형, 스플라인 및 불연속 보간을 사용하는 DoubleAnimationUsingKeyFrames가 만들어집니다.
<!-- This rectangle is animated using a key frame animation
with a combination of interpolation methods. -->
<Rectangle
Width="50"
Height="50"
Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="ComboAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ComboAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"
KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
기간 및 키 시간에 대한 추가 정보
다른 애니메이션과 마찬가지로 키 프레임 애니메이션에는 Duration 속성이 있습니다. 애니메이션의 Duration을 지정하는 것 외에도 해당 기간 중 얼마를 각 키 프레임에 할애할지 지정해야 합니다. 이를 위해 애니메이션의 키 프레임 각각에 대해 KeyTime을 설명합니다. 각 키 프레임의 KeyTime 해당 키 프레임이 끝나는 시기를 지정 합니다.
KeyTime 속성은 키 시간이 재생되는 기간을 지정하지 않습니다. 키 프레임이 재생되는 기간은 키 프레임이 끝나는 시점, 이전 키 프레임 끝난 시점 및 애니메이션의 지속 시간에 의해 결정됩니다. 키 시간은 시간 값, 백분율 또는 특수 값 Uniform 또는 Paced로 지정할 수 있습니다.
다음 목록에서는 키 시간을 지정하는 여러 가지 방법을 설명합니다.
TimeSpan 값
TimeSpan 값을 사용하여 KeyTime을 지정할 수 있습니다. 값은 0보다 크거나 같고 애니메이션의 지속 시간보다 작거나 같아야 합니다. 다음 예제에서는 기간이 10초이고 해당 키 시간이 시간 값으로 지정된 4개의 키 프레임을 갖는 애니메이션을 보여 줍니다.
첫 번째 키 프레임은 처음 3초 동안 기준 값에서 100까지 애니메이션 효과를 준 다음 시간 = 0:0:03에서 끝납니다.
두 번째 키 프레임은 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초이고 해당 키 시간이 백분율로 지정된 4개의 키 프레임을 갖는 애니메이션을 보여 줍니다.
첫 번째 키 프레임은 처음 3초 동안 기준 값에서 100까지 애니메이션 효과를 준 다음 시간 = 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으로 지정된 4개의 키 프레임을 갖는 애니메이션을 보여줍니다.
첫 번째 키 프레임은 처음 2.5초 동안 기준 값에서 100까지 애니메이션 효과를 준 다음 시간 = 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로 지정된 3개의 키 프레임을 갖는 애니메이션을 보여줍니다.
<!-- Using Paced Values. Rectangle moves between key frames at
uniform rate except for first key frame
because using a Paced value on the first KeyFrame in a
collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform04"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Paced.
Paced values are used when a constant rate is desired.
The time allocated to a key frame with a KeyTime of "Paced"
is determined by the time allocated to the other key
frames of the animation. This time is calculated to
attempt to give a "paced" or "constant velocity"
for the animation. -->
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
마지막 키 프레임의 키 시간이 Paced 또는 Uniform이면 확인된 키 시간은 100%로 설정됩니다. 다중 프레임 애니메이션의 첫 번째 키 프레임 속도가 지정되면 확인된 키 시간이 0으로 설정됩니다. (키 프레임 컬렉션에 단일 키 프레임만 포함되며 속도가 지정된 키 프레임인 경우 확인된 키 시간이 100%로 설정됩니다.)
단일 키 프레임 애니메이션 내의 다른 키 프레임은 다른 키 시간 형식을 사용할 수 있습니다.
키 시간 결합, 정렬되지 않은 키 프레임
동일한 애니메이션에서 KeyTime 값 형식이 다른 키 프레임을 사용할 수 있습니다. 또한 키 프레임을 재생되는 순서대로 추가하는 것이 좋지만 반드시 그래야 할 필요는 없습니다. 애니메이션 및 타이밍 시스템은 정렬되지 않은 키 프레임을 확인할 수 있습니다. 잘못된 키 프레임을 갖는 키 시간은 무시됩니다.
다음 목록에서는 키 프레임 애니메이션의 키 프레임에 대한 키 시간을 확인하는 절차를 설명합니다.
키 프레임 애니메이션이 정방향 반복을 완료하는 데 걸리는 총 시간을 나타내는 애니메이션의 총 보간 시간을 확인합니다.
이전 단계에서 확인하지 않은 경우 마지막 키 프레임을 확인합니다. 마지막 키 프레임의 KeyTime이 Uniform 또는 Paced이면 확인된 시간은 총 보간 시간과 같아집니다.
첫 번째 키 프레임의 KeyTime이 Paced이고 이 애니메이션에 1개 이상의 키 프레임이 있는 경우, 해당 KeyTime 값은 0입니다. 키 프레임이 하나만 있고 해당 KeyTime 값이 Paced이면 이전 단계에 설명된 대로 총 보간 시간으로 확인됩니다.
남은 UniformKeyTime 값을 확인합니다. 사용 가능한 시간이 균일하게 분할되어 지정됩니다. 이 프로세스 동안 확인되지 않은 PacedKeyTime 값은 일시적으로 UniformKeyTime 값으로 간주되며 확인된 임시 시간이 부여됩니다.
확인된 KeyTime 값을 갖는 가장 가깝게 선언된 키 프레임을 사용하여 미지정된 키 시간을 갖는 키 프레임의 KeyTime 값을 확인합니다.
나머지 PacedKeyTime 값을 확인합니다. PacedKeyTime은 인접 키 프레임의 KeyTime 값을 사용하여 확인된 시간을 파악합니다. 이것은 이 키 프레임의 확인된 시간 동안 애니메이션의 속도가 일정한지 확인하기 위한 것입니다.
확인된 시간 순서대로 키 프레임을 정렬한 다음(기본 키) 선언 순서로 정렬합니다(보조 키). 예를 들어 확인된 키 프레임 KeyTime 값을 기준으로 안정적인 정렬을 사용합니다.
참고 항목
.NET Desktop feedback
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기