애니메이션 개요
업데이트: 2007년 11월
WPF(Windows Presentation Foundation)에는 시선을 끄는 사용자 인터페이스와 멋진 문서를 만들 수 있는 강력한 그래픽 및 레이아웃 기능 집합이 있습니다. 애니메이션을 사용하면 더욱 화려하고 유용한 멋진 사용자 인터페이스를 만들 수 있습니다. 배경색에 애니메이션 효과를 주거나 애니메이션 Transform을 적용하는 것만으로도 화면을 멋지게 전환하거나 유용한 시각적 효과를 제공할 수 있습니다.
이 개요에서는 WPF 애니메이션 및 타이밍 시스템을 소개합니다. 특히 Storyboard를 사용하는 WPF 개체 애니메이션에 대해 집중적으로 설명합니다.
이 항목에는 다음 단원이 포함되어 있습니다.
- 애니메이션 소개
- WPF 속성 애니메이션 시스템
- 예제: 뷰에서 요소의 페이드 인 및 페이드 아웃 효과 만들기
- 애니메이션 형식
- 속성에 애니메이션 적용
- 대화식으로 Storyboard 제어
- 애니메이션이 끝난 후 발생하는 동작
- 애니메이션에 데이터 바인딩 및 애니메이션 적용
- 다른 애니메이션 적용 방법
- 애니메이션 샘플
- 관련 항목
애니메이션 소개
애니메이션은 조금씩 달라지는 이미지로 구성된 일련의 이미지를 빠르게 순환시켜 만드는 일종의 착시 효과입니다. 인간의 뇌는 이러한 이미지 그룹을 변화하는 한 장면으로 인식합니다. 필름에서는 초당 수십 장의 사진(또는 프레임)을 기록하는 카메라를 사용하여 이러한 착시 효과를 만듭니다. 영사기를 사용하여 프레임을 재생하면 관객은 움직이는 영상을 보게 됩니다.
컴퓨터의 애니메이션도 비슷합니다. 예를 들어 뷰에서 페이드 아웃되는 사각형 그림을 만드는 프로그램은 다음과 같이 작동합니다.
타이머를 만듭니다.
경과된 시간을 알기 위해 설정된 간격으로 타이머를 확인합니다.
타이머를 확인할 때마다 경과된 시간을 기준으로 사각형의 현재 불투명도 값을 계산합니다.
계속해서 사각형을 새 값으로 업데이트하고 다시 그립니다.
WPF 이전에는 Microsoft Windows 개발자가 고유의 타이밍 시스템을 만들어서 관리하거나 특수 사용자 지정 라이브러리를 사용해야 했습니다. WPF는 관리 코드 및 XAML(Extensible Application Markup Language)을 통해 노출되며 WPF 프레임워크에 긴밀하게 통합된 효율적인 타이밍 시스템을 제공합니다. WPF 애니메이션을 사용하면 컨트롤 및 기타 그래픽 개체에 손쉽게 애니메이션 효과를 줄 수 있습니다.
타이밍 시스템을 관리하고 화면을 효율적으로 다시 그리는 모든 내부 작업은 WPF에서 처리합니다. 또한 타이밍 클래스를 제공하므로 사용자는 효과를 내는 방법 대신 만들려는 효과 자체에 집중할 수 있습니다. 또한 WPF를 사용하면 사용자 지정 애니메이션을 생성하는 클래스를 상속할 수 있는 애니메이션 기본 클래스를 노출하여 고유한 애니메이션을 쉽게 만들 수 있습니다. 이러한 사용자 지정 애니메이션에는 표준 애니메이션 클래스보다 많은 성능상의 이점이 있습니다.
WPF 속성 애니메이션 시스템
타이밍 시스템에 대한 몇 가지 중요한 개념을 이해하면 WPF 애니메이션을 더욱 쉽게 사용할 수 있습니다. 가장 중요한 것은 WPF에서 개별 속성에 애니메이션을 적용하여 개체에 애니메이션 효과를 줄 수 있다는 것입니다. 예를 들어 프레임워크 요소가 점점 확대되도록 하려면 요소의 Width 및 Height 속성에 애니메이션 효과를 적용합니다. 뷰에서 개체가 점차 사라지도록 하려면 개체의 Opacity 속성에 애니메이션 효과를 적용합니다.
속성이 애니메이션 기능을 지원하려면 다음과 같은 세 가지 요구 사항을 충족해야 합니다.
종속성 속성이어야 합니다.
DependencyObject에서 상속하고 IAnimatable 인터페이스를 구현하는 클래스에 속해야 합니다.
호환 가능한 애니메이션 형식을 사용할 수 있어야 합니다. WPF(Windows Presentation Foundation)에서 호환 가능한 형식을 제공하지 않는 경우 이러한 형식을 직접 만들 수 있습니다. 자세한 내용은 사용자 지정 애니메이션 개요를 참조하십시오.
WPF에는 애니메이션 가능한 속성이 있는 많은 개체가 있습니다. DependencyObject에서 Button 및 TabControl 같은 컨트롤뿐만 아니라 Panel 및 Shape 개체를 상속할 수 있습니다. 해당 속성 대부분은 종속성 속성입니다.
스타일 및 컨트롤 템플릿을 비롯하여 거의 모든 경우에 애니메이션을 사용할 수 있습니다. 애니메이션이 반드시 시각적인 것은 아닙니다. 이 단원에서 설명하는 조건을 충족하는 경우 사용자 인터페이스에 속하지 않는 개체에도 애니메이션 효과를 줄 수 있습니다.
예제: 뷰에서 요소의 페이드 인 및 페이드 아웃 효과 만들기
이 예제에서는 WPF 애니메이션을 사용하여 종속성 속성 값에 애니메이션 효과를 주는 방법을 보여 줍니다. 예제에서는 Double 값을 생성하는 애니메이션 형식인 DoubleAnimation을 사용하여 Rectangle의 Opacity 속성에 애니메이션 효과를 적용합니다. 결과적으로 Rectangle이 뷰에서 페이드 인된 후 페이드 아웃됩니다.
예제의 첫 번째 부분에서는 Rectangle 요소를 만들어 Page에 표시합니다. 다음 단계에서는 애니메이션을 만들어 사각형의 Opacity 속성에 적용하는 방법을 보여 줍니다.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Fading Rectangle Example">
<StackPanel Margin="10">
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
</Rectangle>
</StackPanel>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace Microsoft.SDK.Animation
{
public class RectangleOpacityFadeExample : Page
{
public RectangleOpacityFadeExample()
{
NameScope.SetNameScope(this, new NameScope());
this.WindowTitle = "Fading Rectangle Example";
StackPanel myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);
Rectangle myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;
}
}
}
1부: DoubleAnimation 만들기
뷰에서 요소를 페이드 인한 후 페이드 아웃하는 한 가지 방법은 요소의 Opacity 속성에 애니메이션 효과를 적용하는 것입니다. Opacity 속성은 Double 형식이기 때문에 double 값을 생성하는 애니메이션이 필요합니다. DoubleAnimation이 그러한 애니메이션 중 하나입니다. DoubleAnimation은 두 double 값 간에 전환을 만듭니다. 이 애니메이션의 시작 값을 지정하려면 해당 From 속성을 설정합니다. 이 애니메이션의 끝 값을 지정하려면 해당 To 속성을 설정합니다.
1.0인 불투명도 값은 개체를 완전히 불투명하게 만들고 0.0인 불투명도 값은 개체를 완전히 투명하게 만듭니다. 1.0에서 0.0으로 애니메이션이 전환되도록 하려면 From 속성을 1.0으로 설정하고 To 속성을 0.0으로 설정합니다.
... <DoubleAnimation From="1.0" To="0.0" /> ...[C#]
DoubleAnimation myDoubleAnimation = new DoubleAnimation(); myDoubleAnimation.From = 1.0; myDoubleAnimation.To = 0.0;다음으로, Duration을 지정해야 합니다. 애니메이션의 Duration은 애니메이션 시작 값에서 대상 값까지 이동하는 시간을 지정합니다. 다음 예제에서는 애니메이션에 5초의 시간을 지정합니다.
... <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" /> ... myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));이전 코드에서는 1.0에서 0.0으로 전환되는 애니메이션을 보여 주었습니다. 즉, 대상 요소가 완전히 불투명한 상태에서 완전히 투명한 상태로 점차 바뀌면서 사라집니다. 뷰에서 요소가 완전히 사라진 후 자동으로 다시 보이게 하려면 애니메이션의 AutoReverse 속성을 true로 설정합니다. 애니메이션이 무한정 반복되게 하려면 RepeatBehavior 속성을 Forever로 설정합니다.
... <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/> ... myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5)); myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
2부: Storyboard 만들기
개체에 애니메이션을 적용하려면 Storyboard를 만든 다음 TargetName 및 TargetProperty연결된 속성을 사용하여 애니메이션 효과를 적용할 개체와 속성을 지정합니다.
Storyboard를 만들고 애니메이션을 자식으로 추가합니다.
... <Storyboard> <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> ...코드에서 Storyboard를 클래스 멤버로 선언합니다.
public class RectangleOpacityFadeExample : Page { private Storyboard myStoryboard;그런 다음 Storyboard를 초기화하고 애니메이션을 자식으로 추가합니다.
myStoryboard = new Storyboard(); myStoryboard.Children.Add(myDoubleAnimation);Storyboard에 애니메이션을 적용할 위치를 지정해야 합니다. Storyboard.TargetName 연결 속성을 사용하여 애니메이션을 적용할 개체를 지정합니다. 다음 코드에서는 DoubleAnimation에 애니메이션을 적용할 개체 이름인 MyRectangle의 대상 이름을 지정합니다.
... <Storyboard> <DoubleAnimation Storyboard.TargetName="MyRectangle" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> ... Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);참고
코드에서 Storyboard를 만드는 경우 이름 범위를 만들고 애니메이션을 적용할 개체 이름을 등록하는 두 가지 추가 단계를 수행해야 합니다. 페이지와 사각형을 만든 이 단원의 시작 부분에 있는 코드에서도 NameScope를 선언하고 사각형 이름을 등록했습니다. NameScope가 아직 없는 경우에는 SetNameScope 메서드를 사용하여 만듭니다. RegisterName 메서드를 사용하여 대상 개체의 이름을 NameScope를 만든 요소를 통해 등록해야 합니다. 그렇지 않으면 Storyboard에서 애니메이션을 적용할 개체를 찾지 못합니다. 다른 예제를 보려면 방법: 이름 범위 정의를 참조하십시오.
TargetProperty 연결 속성을 사용하여 애니메이션을 적용할 속성을 지정합니다. 다음 코드에서는 Rectangle의 Opacity 속성을 대상으로 하도록 애니메이션을 구성합니다.
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));
TargetProperty 구문에 대한 자세한 내용과 추가 예제를 보려면 Storyboard 개요를 참조하십시오.
3부(XAML): Storyboard와 트리거 연결
XAML에서 Storyboard를 적용하고 시작하는 가장 쉬운 방법은 이벤트 트리거를 사용하는 것입니다.
BeginStoryboard 개체를 만들고 Storyboard를 해당 개체와 연결합니다. BeginStoryboard는 Storyboard를 적용하고 시작하는 TriggerAction 형식입니다.
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
EventTrigger를 만든 다음 BeginStoryboard를 Actions 컬렉션에 추가합니다. Storyboard를 시작할 라우트된 이벤트로 EventTrigger의 RoutedEvent 속성을 설정합니다. 라우트된 이벤트에 대한 자세한 내용은 라우트된 이벤트 개요를 참조하십시오.
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Rectangle의 Triggers 컬렉션에 EventTrigger를 추가합니다.
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
3부(코드): Storyboard와 이벤트 처리기 연결
코드에서 Storyboard를 적용하고 시작하는 가장 쉬운 방법은 이벤트 처리기를 사용하는 것입니다.
사각형의 Loaded 이벤트를 등록합니다.
[C#]
myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);이벤트 처리기를 선언합니다. 이벤트 처리기에서 Begin 메서드를 사용하여 Storyboard를 적용합니다.
[C#]
... public void myRectangleLoaded(object sender, RoutedEventArgs e) { myStoryboard.Begin(this); } ...
완성된 예제
다음 예제에서는 뷰에서 페이드 인된 후 페이드 아웃되는 사각형을 만드는 완성된 코드를 보여 줍니다.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Fading Rectangle Example">
<StackPanel Margin="10">
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace SDKSample
{
public class RectangleOpacityFadeExample : Page
{
private Storyboard myStoryboard;
public RectangleOpacityFadeExample()
{
NameScope.SetNameScope(this, new NameScope());
this.WindowTitle = "Fading Rectangle Example";
StackPanel myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);
Rectangle myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));
// Use the Loaded event to start the Storyboard.
myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
myPanel.Children.Add(myRectangle);
this.Content = myPanel;
}
private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
myStoryboard.Begin(this);
}
}
}
애니메이션 형식
애니메이션은 속성 값을 생성하므로 속성 형식에 따라 애니메이션의 형식도 달라집니다. 요소의 Width 속성과 같이 Double을 사용하는 속성에 애니메이션 효과를 적용하려면 Double 값을 생성하는 애니메이션을 사용합니다. Point를 사용하는 속성에 애니메이션 효과를 적용하려면 Point 값 등을 생성하는 애니메이션을 사용합니다. 속성 형식은 매우 다양하므로 System.Windows.Media.Animation 네임스페이스에는 다양한 애니메이션 클래스가 있습니다. 다행히도 이러한 클래스는 다음과 같은 엄격한 명명 규칙을 따르므로 쉽게 구분할 수 있습니다.
<<Type>Animation
"From/To/By" 또는 "기본" 애니메이션이라고 하며 이러한 애니메이션은 시작 및 대상 값 사이에서 또는 시작 값에 오프셋 값을 추가하여 애니메이션 효과를 적용합니다.
시작 값을 지정하려면 애니메이션의 From 속성을 설정합니다.
끝 값을 지정하려면 애니메이션의 To 속성을 설정합니다.
오프셋 값을 지정하려면 애니메이션의 By 속성을 설정합니다.
이 개요의 예제에서는 가장 사용하기 쉬운 이러한 애니메이션을 사용합니다. From/To/By 애니메이션은 From/To/By 애니메이션 개요에 자세히 설명되어 있습니다.
<<Type>AnimationUsingKeyFrames
키 프레임 애니메이션은 대상 값 수를 지정할 수 있으며 보간 방법을 제어할 수 있다는 점에서 From/To/By 애니메이션보다 훨씬 강력합니다. 일부 형식은 키 프레임 애니메이션으로만 애니메이션 효과를 적용할 수 있습니다. 키 프레임 애니메이션은 키 프레임 애니메이션 개요에 자세히 설명되어 있습니다.
<<Type>AnimationUsingPath
경로 애니메이션을 사용하면 기하학적 경로를 사용하여 애니메이션 값을 생성할 수 있습니다.
<<Type>AnimationBase
구현 시 <Type> 값에 애니메이션 효과를 적용하는 추상 클래스입니다. 이 클래스는 <Type>Animation 및 <Type>AnimationUsingKeyFrames 클래스의 기본 클래스 역할을 합니다. 고유한 사용자 지정 애니메이션을 만들려는 경우에만 이러한 클래스를 직접 사용합니다. 그렇지 않은 경우에는 <Type>Animation 또는 KeyFrame<Type>Animation을 사용합니다.
대부분의 경우 DoubleAnimation 및 ColorAnimation 같은 <Type>Animation 클래스를 사용합니다.
다음 표에서는 몇 가지 공통 애니메이션 형식 및 해당 형식에 사용되는 몇 가지 속성을 보여 줍니다.
속성 형식 |
해당 기본(From/To/By) 애니메이션 |
해당 키 프레임 애니메이션 |
해당 경로 애니메이션 |
사용 예제 |
|---|---|---|---|---|
없음 |
SolidColorBrush의 Color 또는 GradientStop에 애니메이션 효과를 적용합니다. |
|||
EllipseGeometry의 Center 위치에 애니메이션 효과를 적용합니다. |
||||
없음 |
없음 |
Timeline에 속하는 애니메이션
모든 애니메이션 형식은 Timeline 클래스에서 상속되므로 모든 애니메이션은 Timeline의 특수 형식입니다. Timeline은 시간 세그먼트를 정의합니다. 사용자는 Timeline의타이밍 동작인 Duration을 지정하여 반복 횟수와 진행 속도를 제어할 수 있습니다.
애니메이션은 Timeline이므로 시간 세그먼트를 표현할 수도 있습니다. 또한 애니메이션은 지정된 시간 세그먼트(또는 Duration)가 진행되는 동안 출력 값을 계산합니다. 애니메이션을 진행하거나 "재생"하면 관련 속성이 업데이트됩니다.
자주 사용되는 세 가지 타이밍 속성은 Duration, AutoReverse 및 RepeatBehavior입니다.
Duration 속성
앞서 설명한 것처럼 Timeline은 시간 세그먼트를 나타냅니다. 이 세그먼트의 길이는 대개 TimeSpan 값을 사용하여 지정하는 Timeline의 Duration으로 결정됩니다. Timeline이 이 기간의 끝에 도달하면 반복이 완료됩니다.
애니메이션은 Duration 속성을 사용하여 현재 값을 결정합니다. 애니메이션의 Duration 값을 지정하지 않으면 기본값인 1초가 사용됩니다.
다음 구문에서는 Duration 속성에 대한 XAML(Extensible Application Markup Language) 특성 구문의 단순화된 버전을 보여 줍니다.
hours:minutes:seconds |
다음 표에서는 몇 가지 Duration 설정과 그 결과 값을 보여 줍니다.
설정 |
결과 값 |
|---|---|
0:0:5.5 |
5.5초 |
0:30:5.5 |
30분 5.5초 |
1:30:5.5 |
1시간 30분 5.5초 |
코드에서 Duration을 지정하는 한 가지 방법은 FromSeconds 메서드를 사용하여 TimeSpan을 만든 다음 TimeSpan을 사용하여 새 Duration 구조체를 선언하는 것입니다.
Duration 값에 대한 자세한 내용과 완전한 XAML(Extensible Application Markup Language) 구문에 대해서는 Duration 형식 페이지를 참조하십시오.
AutoReverse
AutoReverse 속성은 Timeline이 Duration의 끝에 도달한 후 뒤로 재생될지 여부를 지정합니다. 이 애니메이션 속성을 true로 설정하면 애니메이션이 Duration의 끝에 도달한 후 역방향으로 재생됩니다. 즉, 끝 값에서 시작 값으로 재생됩니다. 기본적으로 이 속성은 false로 설정됩니다.
RepeatBehavior
RepeatBehavior 속성은 Timeline 재생 횟수를 지정합니다. 기본적으로 Timeline에는 반복 횟수가 1.0으로 지정되므로 한 번만 재생되고 반복되지 않습니다.
이러한 속성과 기타 속성에 대한 자세한 내용은 타이밍 동작 개요를 참조하십시오.
속성에 애니메이션 적용
이전 단원에서는 다양한 형식의 애니메이션과 해당 타이밍 속성에 대해 설명했습니다. 이 단원에서는 애니메이션 효과를 줄 속성에 애니메이션을 적용하는 방법을 보여 줍니다. Storyboard 개체는 속성에 애니메이션을 적용하는 한 가지 방법을 제공합니다. Storyboard는 Storyboard에 포함된 애니메이션에 대한 대상 정보를 제공하는컨테이너 Timeline입니다.
개체 및 속성 대상 지정
Storyboard 클래스에서는 TargetName 및 TargetProperty연결된 속성을 제공합니다. 애니메이션에 이러한 속성을 설정하여 애니메이션을 적용할 대상을 지정할 수 있습니다. 하지만 애니메이션에 대상 개체를 지정하려면 대개 개체에 이름을 지정해야 합니다.
FrameworkElement에 이름을 할당하는 것은 Freezable 개체에 이름을 할당하는 것과 다릅니다. 대부분의 컨트롤과 패널은 프레임워크 요소이지만 Brush, Transform, Geometry 같은 대부분의 순수 그래픽 개체는 Freezable 개체입니다. 형식이 FrameworkElement인지 Freezable인지 모르는 경우에는 형식 페이지의 상속 계층 구조 단원을 참조하십시오.
FrameworkElement를 애니메이션 대상으로 만들려면 해당 Name 속성을 설정하여 이름을 지정합니다. 코드에서 RegisterName 메서드를 사용하여 요소가 속한 페이지에 요소 이름을 등록할 수도 있습니다.
XAML에서 Freezable 개체를 애니메이션 대상으로 만들려면 x:Name 특성을 사용하여 이름을 할당합니다. 코드에서는 간단히 RegisterName 메서드를 사용하여 개체가 속한 페이지에 개체를 등록할 수 있습니다.
다음 단원에는 XAML 및 코드에서 요소에 이름을 지정하는 예제가 나와 있습니다. 이름 및 대상 지정에 대한 자세한 내용은 Storyboard 개요를 참조하십시오.
Storyboard 적용 및 시작
XAML에서 Storyboard를 시작하려면 Storyboard와 EventTrigger를 연결해야 합니다. EventTrigger는 지정된 이벤트가 발생할 때 수행할 작업을 설명하는 개체입니다. 이러한 작업 중 하나가 Storyboard를 시작하는 데 사용할 수 있는 BeginStoryboard 작업이 될 수 있습니다. 이벤트 트리거를 사용하면 응용 프로그램이 특정 이벤트에 응답하는 방법을 지정할 수 있다는 점에서 이벤트 트리거는 이벤트 처리기와 개념이 비슷합니다. 하지만 이벤트 처리기와 달리 이벤트 트리거는 추가 코드 없이 XAML에서 완전하게 설명할 수 있습니다.
코드에서 Storyboard를 시작하려면 EventTrigger를 사용하거나 Storyboard 클래스의 Begin 메서드를 사용하면 됩니다.
대화식으로 Storyboard 제어
이전 예제에서는 이벤트가 발생할 때 Storyboard를 시작하는 방법을 보여 주었습니다. Storyboard를 시작한 후 대화식으로 제어하는 것도 가능합니다. 즉, Storyboard에 대해 일시 중지, 다시 시작, 중지, 전체 기간으로 이동, 찾기 및 제거 작업을 수행할 수 있습니다. Storyboard를 대화식으로 제어하는 방법을 보여 주는 예제와 자세한 내용은 Storyboard 개요를 참조하십시오.
애니메이션이 끝난 후 발생하는 동작
FillBehavior 속성은 Timeline이 끝난 후의 동작을 지정합니다. 기본적으로 Timeline은 끝날 때 Filling을 시작합니다. Filling인 애니메이션은 최종 출력 값을 유지합니다.
이전 예제에서 DoubleAnimation은 RepeatBehavior 속성이 Forever로 설정되어 있기 때문에 끝나지 않습니다. 다음 예제에서는 유사한 애니메이션을 사용하여 사각형에 애니메이션 효과를 줍니다. 하지만 이전 예제와 달리 이 애니메이션의 RepeatBehavior 및 AutoReverse 속성은 기본값으로 유지됩니다. 따라서 애니메이션이 5초 동안 1에서 0으로 진행한 후 중지됩니다.
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
애니메이션의 FillBehavior가 기본값인 HoldEnd에서 변경되지 않았기 때문에 애니메이션이 끝날 때 최종 값인 0이 유지됩니다. 따라서 사각형의 Opacity는 애니메이션이 끝난 후 0으로 유지됩니다. 사각형의 Opacity를 다른 값으로 설정한 경우에도 애니메이션이 계속 Opacity 속성에 적용되기 때문에 코드가 아무런 영향을 주지 않는 것처럼 보입니다.
코드에서 애니메이션이 적용된 속성을 다시 제어하는 한 가지 방법은 BeginAnimation 메서드를 사용하여 AnimationTimeline 매개 변수에 null을 지정하는 것입니다. 자세한 내용과 예제는 방법: Storyboard를 사용하여 애니메이션 효과를 적용한 후 속성 설정을 참조하십시오.
Active 또는 Filling 속성 값을 설정하더라도 애니메이션이 아무런 영향이 없는 것처럼 보이지만 이 속성 값은 변경된 것입니다. 자세한 내용은 애니메이션 및 타이밍 시스템 개요를 참조하십시오.
애니메이션에 데이터 바인딩 및 애니메이션 적용
대부분의 애니메이션 속성은 데이터에 바인딩하거나 애니메이션을 적용할 수 있습니다. 예를 들어 DoubleAnimation의 Duration 속성에 애니메이션을 적용할 수 있습니다. 하지만 타이밍 시스템이 작동하는 방식 때문에 데이터가 바인딩되거나 애니메이션이 적용된 애니메이션은 데이터가 바인딩되거나 애니메이션이 적용된 개체와 다르게 동작합니다. 이러한 동작을 이해하려면 속성에 애니메이션을 적용하는 개념을 파악해야 합니다.
사각형의 Opacity에 애니메이션을 적용하는 방법을 보여 주는 이전 단원의 예제를 참조하십시오. 이전 예제에서 사각형을 로드하면 이벤트 트리거가 Storyboard를 적용합니다. 타이밍 시스템에서는 Storyboard 및 해당 애니메이션의 복사본을 생성합니다. 이때 생성되는 복사본은 고정되어 있으며(읽기 전용) 복사본으로부터 Clock 개체가 만들어집니다. 이러한 Clock이 대상 속성에 애니메이션을 적용하는 실제 작업을 수행합니다.
타이밍 시스템은 DoubleAnimation에 대한 Clock을 만들고 DoubleAnimation의 TargetName 및 TargetProperty로 지정된 개체 및 속성에 해당 Clock을 적용합니다. 이 경우에는 타이밍 시스템이 Clock을 이름이 "MyRectangle"인 개체의 Opacity 속성에 적용합니다.
Storyboard에 대한 Clock도 생성되지만 이 Clock은 어떠한 속성에도 적용되지 않습니다. 이 Clock의 용도는 DoubleAnimation에 대해 생성된 자식 Clock을 제어하는 것입니다.
애니메이션에 데이터 바인딩 또는 애니메이션 변경 내용이 반영되도록 하려면 Clock을 다시 생성해야 합니다. Clock은 자동으로 다시 생성되지 않습니다. 애니메이션에 변경 내용을 반영하려면 BeginStoryboard 또는 Begin 메서드를 사용하여 해당 Storyboard를 다시 적용합니다. 이러한 메서드 중 하나를 사용하면 애니메이션이 다시 시작됩니다. 코드에서는 Seek 메서드를 통해 Storyboard를 이전 위치로 다시 이동할 수 있습니다.
데이터 바인딩된 애니메이션의 예제를 보려면 키 스플라인 애니메이션 샘플을 참조하십시오. 애니메이션 및 타이밍 시스템 작동 방식에 대한 자세한 내용은 애니메이션 및 타이밍 시스템 개요를 참조하십시오.
다른 애니메이션 적용 방법
이 개요의 예제에서는 Storyboard를 사용하여 애니메이션을 적용하는 방법을 보여 줍니다. 코드를 사용할 경우에는 다른 다양한 방식으로 애니메이션을 적용할 수 있습니다. 자세한 내용은 속성 애니메이션 기술 개요를 참조하십시오.
애니메이션 샘플
다음 샘플을 이용하면 응용 프로그램에 애니메이션을 추가하는 작업을 쉽게 시작할 수 있습니다.
-
프레임워크 요소와 Freezable 개체에 애니메이션을 적용하는 방법을 보여 줍니다.
-
다양한 From/To/By 설정을 보여 줍니다.
-
애니메이션의 타이밍 동작을 제어할 수 있는 다양한 방법을 보여 줍니다. 또한 이 샘플은 애니메이션의 대상 값을 데이터에 바인딩하는 방법을 보여 줍니다.
참고 항목
개념
Windows Presentation Foundation 시작