다음을 통해 공유

애니메이션 개요

  • 아티클

Windows Presentation Foundation(WPF)은 매력적인 사용자 인터페이스와 멋진 문서를 만들 수 있는 강력한 그래픽 및 레이아웃 기능 집합을 제공합니다. 애니메이션은 매력적인 사용자 인터페이스를 훨씬 더 화려하고 유용하게 만들어줄 수 있습니다. 배경색에 애니메이션을 적용하거나 애니메이션이 사용된 Transform을 적용하는 것만으로도 멋진 화면 전환을 구현하거나 유용한 시각적 효과를 제공할 수 있습니다.

이 개요에서는 WPF 애니메이션 및 타이밍 시스템을 소개합니다. 여기서는 스토리보드를 사용하여 WPF 개체의 애니메이션을 집중적으로 설명합니다.

애니메이션 소개

애니메이션은 마지막까지 조금씩 달라지는 일련의 이미지를 빠르게 순환하면서 만들어지는 효과입니다. 뇌는 이미지 그룹을 변화하는 하나의 영상으로 인식합니다. 영화에서는 많은 사진 또는 프레임을 초별로 기록하는 카메라를 사용하여 이러한 효과를 만듭니다. 프로젝터에서 프레임이 재생되면 청중은 동영상을 보게 됩니다.

컴퓨터의 애니메이션도 유사합니다. 예를 들어 사각형 그림을 보기에서 페이드 아웃하는 프로그램은 다음과 같이 작동할 수 있습니다.

  • 프로그램이 타이머를 만듭니다.

  • 프로그램이 설정된 간격으로 타이머를 확인하여 경과된 시간을 파악합니다.

  • 프로그램이 타이머를 확인할 때마다 경과된 시간에 따라 사각형의 현재 불투명도 값을 계산합니다.

  • 그런 다음 새 값으로 사각형을 업데이트한 후 그립니다.

WPF 이전에는 Microsoft Windows 개발자가 자체 타이밍 시스템을 만들어 관리하거나 특수한 사용자 지정 라이브러리를 사용해야 했습니다. WPF에는 관리 코드와 XAML을 통해 노출되고 WPF 프레임워크에 긴밀하게 통합되는 효율적인 타이밍 시스템이 포함되어 있습니다. WPF 애니메이션을 사용하면 쉽게 컨트롤 및 기타 그래픽 개체에 애니메이션 효과를 줄 수 있습니다.

WPF는 타이밍 시스템을 관리하고 화면을 효율적으로 다시 그리는 모든 백그라운드 작업을 처리합니다. 그뿐 아니라 이러한 효과를 달성하는 기법이 아닌, 만들려는 효과에 집중할 수 있도록 하는 타이밍 클래스를 제공합니다. 또한 WPF는 클래스가 상속할 수 있는 애니메이션 기본 클래스를 노출하여 사용자 고유의 애니메이션을 쉽게 만들 수 있도록 하므로 애니메이션을 사용자 지정할 수 있습니다. 이러한 사용자 지정 애니메이션은 표준 애니메이션 클래스에 비해 성능상의 이점도 큽니다.

WPF 속성 애니메이션 시스템

타이밍 시스템에 대한 몇 가지 중요한 개념을 이해하면 WPF 애니메이션을 더 쉽게 사용할 수 있습니다. 가장 중요한 점은 WPF에서는 개별 속성에 애니메이션을 적용하여 개체에 애니메이션 효과를 준다는 것입니다. 예를 들어 프레임워크 요소가 커지도록 하려면 프레임워크의 Width 및 Height 속성에 애니메이션 효과를 줍니다. 개체가 보기에서 페이드되도록 하려면 개체의 Opacity 속성에 애니메이션 효과를 줍니다.

속성에 애니메이션 기능을 부여하려면 다음 세 가지 요구 사항을 충족해야 합니다.

  • 종속성 속성이어야 합니다.

  • DependencyObject에서 상속하고 IAnimatable 인터페이스를 구현하는 클래스에 속해야 합니다.

  • 사용 가능한 호환되는 애니메이션 형식이어야 합니다. (WPF에서 제공하지 않는 경우 직접 만들 수 있습니다. 사용자 지정 애니메이션 개요를 참조하세요.)

WPF에는 IAnimatable 속성이 있는 많은 개체가 포함되어 있습니다. Button, TabControl와 같은 컨트롤과 Panel 및 Shape 개체는 DependencyObject에서 상속됩니다. 해당 속성 대부분은 종속성 속성입니다.

스타일 및 템플릿 컨트롤을 비롯한 거의 모든 위치에서 애니메이션을 사용할 수 있습니다. 애니메이션은 시각적일 필요가 없습니다. 이 섹션에 설명된 조건을 충족하지 않을 경우 사용자 인터페이스에 속하지 않는 개체에 애니메이션 효과를 줄 수 있습니다.

예제: 보기에서 요소 페이드 인 및 페이드 아웃

이 예제는 WPF 애니메이션을 사용하여 종속성 속성의 값에 애니메이션 효과를 주는 방법을 보여 줍니다. 이 예제는 Double 값을 생성하는 애니메이션 형식인 DoubleAnimation을 사용하여 Rectangle의 Opacity 속성에 애니메이션 효과를 줍니다. 그 결과 Rectangle가 보기에서 페이드 인 및 페이드 아웃됩니다.

예제의 첫 번째 부분은 Rectangle 요소를 만듭니다. 이어지는 단계에서는 애니메이션을 만들어 사각형의 Opacity 속성에 적용하는 방법을 보여 줍니다.

다음은 XAML에서 StackPanel의 Rectangle 요소를 만드는 방법을 보여 줍니다.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

다음은 코드에서 StackPanel의 Rectangle 요소를 만드는 방법을 보여 줍니다.

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var 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;

Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

1부: DoubleAnimation 만들기

보기에서 요소를 페이드 인 및 페이드 아웃하는 한 가지 방법은 해당 Opacity 속성에 애니메이션 효과를 주는 것입니다. Opacity 속성이 Double 형식이므로 double 값을 생성하는 애니메이션이 필요합니다. DoubleAnimation이 그런 애니메이션입니다. DoubleAnimation는 두 double 값 간에 전환을 만듭니다. 시작 값을 지정하려면 해당 From 속성을 설정합니다. 종료 값을 지정하려면 해당 To 속성을 설정합니다.

  1. 불투명도 값 1.0을 사용하면 개체가 완전히 불투명해지고 불투명도 값 0.0을 사용하면 개체가 완전히 보이지 않게 됩니다. 애니메이션이 1.0에서 0.0으로 전환되도록 하려면 From 속성을 1.0으로, To 속성을 0.0으로 설정합니다. 다음은 XAML에서 DoubleAnimation을 만드는 방법을 보여 줍니다.

    <DoubleAnimation From="1.0" To="0.0" />

    다음은 코드에서 DoubleAnimation을 만드는 방법을 보여 줍니다.

    var myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;

    Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0

  2. 다음으로 Duration을 지정해야 합니다. 애니메이션의 Duration은 시작 값에서 대상 값까지 이동하는 데 소요되는 시간을 지정합니다. 다음은 XAML에서 Duration을 5초로 설정하는 방법을 보여 줍니다.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

    다음은 코드에서 Duration을 5초로 설정하는 방법을 보여 줍니다.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

  3. 앞의 코드에서는 1.0에서 0.0으로 전환되어 대상 요소가 완전히 불투명한 상태에서 완전히 보이지 않는 상태로 페이드되도록 하는 애니메이션을 보여 주었습니다. 사라진 요소가 다시 보기로 페이드되도록 하려면 애니메이션의 AutoReverse 속성을 true로 설정합니다. 애니메이션이 무한 반복되도록 하려면 RepeatBehavior 속성을 Forever로 설정합니다. 다음은 XAML에서 AutoReverse 및 RepeatBehavior 속성을 설정하는 방법을 보여 줍니다.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>

    다음은 코드에서 AutoReverse 및 RepeatBehavior 속성을 설정하는 방법을 보여 줍니다.

    myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

    myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

2부: Storyboard 만들기

개체에 애니메이션을 적용하려면 Storyboard를 만들고 TargetName 및 TargetProperty 연결된 속성을 사용하여 애니메이션 효과를 줄 개체와 속성을 지정합니다.

  1. Storyboard를 만들고 애니메이션을 그 자식으로 추가합니다. 다음은 XAML에서 Storyboard를 만드는 방법을 보여 줍니다.

    <Storyboard>
    <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    코드에서 Storyboard를 만들려면 클래스 수준에서 Storyboard 변수를 선언합니다.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    그런 다음 Storyboard를 초기화하고 애니메이션을 자식으로 추가합니다.

    myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

    myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

  2. Storyboard는 애니메이션을 적용할 위치를 알아야 합니다. Storyboard.TargetName 연결된 속성을 사용하여 애니메이션 효과를 줄 개체를 지정합니다. 다음은 XAML에서 DoubleAnimation의 대상 이름을 MyRectangle로 설정하는 방법을 보여 줍니다.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    다음은 코드에서 DoubleAnimation의 대상 이름을 MyRectangle로 설정하는 방법을 보여 줍니다.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. TargetProperty 연결된 속성을 사용하여 애니메이션 효과를 줄 속성을 지정합니다. 다음은 XAML에서 Rectangle의 Opacity 속성을 대상 지정하도록 애니메이션을 구성하는 방법을 보여 줍니다.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    다음은 코드에서 Rectangle의 Opacity 속성을 대상 지정하도록 애니메이션을 구성하는 방법을 보여 줍니다.

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

TargetProperty 구문에 대한 자세한 내용과 추가 예제는 스토리보드 개요를 참조하세요.

3부: Storyboard를 트리거에 연결

XAML에서 Storyboard를 적용하고 시작하는 가장 쉬운 방법은 이벤트 트리거를 사용하는 것입니다. 이 섹션은 XAML에서 Storyboard를 트리거와 연결하는 방법을 보여 줍니다.

  1. BeginStoryboard 개체를 만들고 스토리보드에 연결합니다. 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>

  2. EventTrigger를 만들고 BeginStoryboard를 Actions 컬렉션에 추가합니다. EventTrigger의 RoutedEvent 속성을 Storyboard를 시작할 라우트된 이벤트로 설정합니다. 라우트된 이벤트에 대한 자세한 내용은 라우트된 이벤트 개요를 참조하세요.

    <!-- 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>

  3. EventTrigger를 사각형의 Triggers 컬렉션에 추가합니다.

    <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를 적용하고 시작하는 가장 쉬운 방법은 이벤트 처리기를 사용하는 것입니다. 이 섹션은 코드에서 Storyboard를 이벤트 처리기와 연결하는 방법을 보여 줍니다.

  1. 사각형의 Loaded 이벤트에 등록합니다.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. 이벤트 처리기를 선언합니다. 이벤트 처리기에서 Begin 메서드를 사용하여 스토리보드를 적용합니다.

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

완성된 예제

다음은 보기에서 페이드 인 및 페이드 아웃되는 사각형을 XAML에서 만드는 방법을 보여 줍니다.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <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>
    </Grid>
</Window>

다음에서는 코드에서 보기로부터 페이드 인 및 페이드 아웃되는 사각형을 만드는 방법을 보여 줍니다.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            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);
        }
    }
}

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As 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.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

애니메이션 형식

애니메이션은 속성 값을 생성하므로 속성 형식마다 다양한 애니메이션 형식이 존재합니다. Double을 사용하는 속성(예: 요소의 Width 속성)에 애니메이션 효과를 주려면 Double 값을 생성하는 애니메이션을 사용합니다. Point를 사용하는 속성에 애니메이션 효과를 주려면 Point 값 등을 생성하는 애니메이션을 사용합니다. 다른 속성 형식이 많기 때문에 System.Windows.Media.Animation 네임스페이스에도 몇 가지 애니메이션 클래스가 있습니다. 다행스럽게도 쉬운 구분을 위해 엄격한 명명 규칙을 따릅니다.

  • <Type>Animation

    "From/To/By" 또는 "basic" 애니메이션으로도 알려져 있는 이러한 클래스는 시작 값과 대상 값 사이에 애니메이션 효과를 주거나 시작 값에 오프셋 값을 추가하여 애니메이션 효과를 줍니다.

    • 시작 값을 지정하려면 애니메이션의 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 클래스를 사용하는 것이 좋습니다.

다음 표에서는 몇 가지 일반적인 애니메이션 형식 및 사용되는 일부 속성을 보여 줍니다.

속성 형식 해당 basic(From/To/By) 애니메이션 해당 키 프레임 애니메이션 해당 경로 애니메이션 사용 예제
Color ColorAnimation ColorAnimationUsingKeyFrames 없음 SolidColorBrush 또는 GradientStop의 Color에 애니메이션 효과를 줍니다.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath DockPanel의 Width 또는 Button의 Height에 애니메이션 효과를 줍니다.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath EllipseGeometry의 Center 위치에 애니메이션 효과를 줍니다.
String 없음 StringAnimationUsingKeyFrames 없음 TextBlock의 Text 또는 Button의 Content에 애니메이션 효과를 줍니다.

애니메이션은 타임라인임

모든 애니메이션 형식은 Timeline 클래스에서 상속되므로 모든 애니메이션은 특수화된 형식의 타임라인입니다. Timeline은 시간 세그먼트를 정의합니다. 타임라인의 타이밍 동작, 즉 해당 Duration, 반복 횟수 및 시간 진행 속도를 지정할 수 있습니다.

애니메이션은 Timeline이므로 시간의 세그먼트도 표현합니다. 애니메이션은 지정된 시간 세그먼트(또는 Duration)를 통해 진행되면서 출력 값도 계산합니다. 애니메이션은 진행되거나 "재생"되면서 연결된 속성을 업데이트합니다.

자주 사용되는 세 가지 타이밍 속성은 Duration, AutoReverse, RepeatBehavior입니다.

Duration 속성

앞서 설명한 것처럼 타임라인은 시간 세그먼트를 나타냅니다. 이 세그먼트의 길이는 일반적으로 TimeSpan 값을 사용하여 지정되는 타임라인의 Duration에 의해 결정됩니다. 타임라인이 기간 끝에 도달하면 반복이 완료되는 것입니다.

애니메이션은 Duration 속성을 사용하여 현재 값을 결정합니다. 애니메이션의 Duration 값을 지정하지 않으면 기본값인 1이 사용됩니다.

다음 구문은 Duration 속성의 간소화된 XAML(Extensible Application Markup Language) 특성 구문 버전을 보여 줍니다.

시간 : 분 : 초

다음 표는 몇 가지 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 속성은 타임라인이 Duration의 끝에 도달한 후 반대 방향으로 재생되는지 여부를 지정합니다. 이 애니메이션 속성을 true로 설정하면 애니메이션은 해당 Duration의 끝에 도달한 후 반대 방향으로 재생되어 종료 값부터 시작 값까지 재생됩니다. 기본적으로 이 속성은 false입니다.

RepeatBehavior

RepeatBehavior 속성은 타임라인이 재생되는 횟수를 지정합니다. 기본적으로 타임라인의 반복 횟수는 1.0입니다. 이것은 1번만 재생되고 전혀 반복되지 않음을 나타냅니다.

이러한 속성 및 기타 속성에 대한 자세한 내용은 타이밍 동작 개요를 참조하세요.

속성에 애니메이션 적용

이전 섹션에서는 다양한 애니메이션 유형 및 타이밍 속성에 대해 설명합니다. 이 섹션에서는 애니메이션 효과를 주려는 속성에 애니메이션을 적용하는 방법을 보여 줍니다. Storyboard 개체는 속성에 애니메이션을 적용하는 한 가지 방법을 제공합니다. Storyboard는 포함된 애니메이션에 대한 대상 정보를 제공하는 컨테이너 타임라인입니다.

개체 및 속성을 대상으로 지정

Storyboard 클래스는 TargetName 및 TargetProperty 연결된 속성을 제공합니다. 애니메이션에 이러한 속성을 설정하여 적용할 애니메이션을 지정합니다. 그러나 애니메이션이 개체를 대상으로 지정하려면 먼저 해당 개체에 이름을 지정해야 합니다.

FrameworkElement에 이름을 할당하는 것은 Freezable 개체에 이름을 할당하는 것과 다릅니다. 대부분의 컨트롤 및 패널은 프레임워크 요소입니다. 그러나 브러시, 변환, 기 하 도형 등의 순수한 그래픽 개체 대부분은 Freezable 개체입니다. 형식이 FrameworkElement인지 Freezable인지 잘 모르겠다면 참조 설명서의 상속 계층 구조 섹션을 참조하세요.

  • FrameworkElement를 애니메이션 대상으로 만들려면 Name 속성을 설정하여 이름을 지정합니다. 또한 코드에서 RegisterName 메서드를 사용하여 해당 요소가 속하는 페이지에 요소 이름을 등록합니다.

  • XAML에서 Freezable 개체를 애니메이션 대상으로 만들려면 x:Name Directive를 사용하여 이름을 할당합니다. 코드에서는 RegisterName 메서드를 사용하여 개체가 속한 페이지에 개체를 등록하면 됩니다.

다음에 나오는 섹션은 XAML 및 코드에서 요소 이름을 지정하는 방법의 예를 제공합니다. 이름 및 대상 지정에 대한 자세한 내용은 스토리보드 개요를 참조하세요.

Storyboard 적용 및 시작

XAML에서 스토리보드를 시작하려면 EventTrigger에 스토리보드를 연결합니다. EventTrigger는 지정된 이벤트가 발생할 때 수행할 작업을 설명하는 개체입니다. 이러한 작업 중 하나는 스토리보드를 시작할 때 사용하는 BeginStoryboard 작업일 수 있습니다. 이벤트 트리거는 애플리케이션이 특정 이벤트에 응답하는 방법을 지정할 수 있도록 하므로 개념적으로 이벤트 처리기와 비슷합니다. 그렇지만 이벤트 트리거는 이벤트 처리기와 달리 XAML에서 완전히 기술할 수 있으며, 다른 코드는 필요하지 않습니다.

코드에서 Storyboard를 시작하려면 EventTrigger를 사용하거나 Storyboard 클래스의 Begin 메서드를 사용하면 됩니다.

대화식으로 Storyboard 제어

이전 예제는 이벤트가 발생할 때 Storyboard를 시작하는 방법을 보여 주었습니다. 스토리보드가 시작된 후 대화식으로 Storyboard를 제어할 수도 있습니다. Storyboard 일시 중지, 계속, 중지, 채우기 기간까지 이동, 찾기, 제거가 가능합니다. Storyboard를 대화식으로 제어하는 방법을 보여 주는 예제 및 자세한 내용을 보려면 Storyboard 개요를 참조하세요.

애니메이션이 끝난 후에 발생하는 결과

FillBehavior 속성은 종료 시 타임라인의 동작을 지정합니다. 기본적으로 타임라인은 종료 시 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));

Dim myDoubleAnimation As 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을 지정하는 것입니다. 자세한 내용 및 예제를 보려면 스토리보드를 사용하여 애니메이션 효과를 적용한 후 속성 설정을 참조하세요.

Active 또는 Filling 애니메이션이 있는 속성 값을 설정해도 아무 효과가 없는 것처럼 보이지만 속성 값은 변경됩니다. 자세한 내용은 애니메이션 및 타이밍 시스템 개요를 참조하세요.

데이터 바인딩 및 애니메이션 효과 적용

대부분의 애니메이션 속성은 데이터 바인딩이거나 애니메이션 효과를 적용할 수 있습니다. 예를 들어 DoubleAnimation의 Duration 속성에 애니메이션 효과를 줄 수 있습니다. 그러나 타이밍 시스템이 작동하는 방식 때문에 데이터 바인딩 또는 애니메이션 효과 주기가 다른 데이터 바인딩 또는 애니메이션 개체와 다르게 동작합니다. 해당 동작을 이해하기 위해 속성에 애니메이션을 적용하는 것이 어떤 의미를 갖는지 이해하면 도움이 됩니다.

사각형의 Opacity에 애니메이션 효과를 주는 방법을 보여 주는 이전 섹션의 예제를 참조하세요. 이전 예제의 사각형이 로드되면 해당 이벤트 트리거가 Storyboard를 적용합니다. 타이밍 시스템은 Storyboard의 복사본과 해당 애니메이션을 만듭니다. 이러한 복사본은 고정 (읽기 전용 됨) 및 Clock 개체에서 생성 됩니다. 이러한 클록은 대상 속성에 애니메이션 효과를 주는 실제 작업을 수행합니다.

타이밍 시스템은 DoubleAnimation의 시계를 만들어 DoubleAnimation의 TargetName 및 TargetProperty에 의해 지정되는 개체와 속성에 적용합니다. 이 경우 타이밍 시스템은 시계를 "MyRectangle"이라는 개체의 Opacity 속성에 적용합니다.

Storyboard의 시계도 만들어지지만 이 시계는 어떤 속성에도 적용되지 않습니다. 이 시계의 용도는 DoubleAnimation을 위해 만들어지는 시계인 자식 시계를 제어하는 것입니다.

애니메이션에 데이터 바인딩 또는 애니메이션 변경 내용을 반영하려면 해당 클록이 다시 생성되어야 합니다. 클록은 자동으로 다시 생성되지 않습니다. 애니메이션이 변경 내용을 반영하도록 하려면 BeginStoryboard 또는 Begin 메서드를 사용하여 스토리보드를 다시 적용하세요. 이러한 메서드 중 하나를 사용하면 애니메이션이 다시 시작됩니다. 코드에서는 Seek 메서드를 사용하여 스토리보드를 이전 위치로 다시 이동할 수 있습니다.

데이터 바인딩 애니메이션 예제를 보려면 키 스플라인 애니메이션 샘플을 참조하세요. 애니메이션 및 타이밍 시스템 작동 방식에 대한 자세한 내용은 애니메이션 및 타이밍 시스템 개요를 참조하세요.

애니메이션 효과를 주는 다른 방법

이 개요의 예제에서는 Storyboard를 사용하여 애니메이션 효과를 주는 방법을 보여 줍니다. 코드를 사용하면 여러 가지 방법으로 애니메이션 효과를 줄 수 있습니다. 자세한 내용은 속성 애니메이션 기법 개요를 참조하세요.

애니메이션 샘플

다음 샘플은 애플리케이션에 애니메이션을 추가하는 데 도움이 될 수 있습니다.

제목 설명
애니메이션 및 타이밍 시스템 개요 애니메이션을 만들 수 있도록 타이밍 시스템이 Timeline 및 Clock 클래스를 사용하는 방법을 설명합니다.
애니메이션에 대한 유용한 정보 성능 같은 애니메이션 문제 해결에 도움이 되는 유용한 정보를 나열합니다.
사용자 지정 애니메이션 개요 키 프레임, 애니메이션 클래스 또는 프레임당 콜백으로 애니메이션 시스템을 확장하는 방법을 설명합니다.
From/To/By 애니메이션 개요 두 값 사이를 전환하는 애니메이션을 만드는 방법을 설명합니다.
키 프레임 애니메이션 개요 보간 방법을 제어하는 기능을 포함하여 여러 대상 값을 사용하여 애니메이션을 만드는 방법을 설명합니다.
감속/가속 함수 반송 같은 실질적인 동작을 얻기 위해 애니메이션에 수학 수식을 적용하는 방법을 설명합니다.
경로 애니메이션 개요 복잡한 경로를 따라 개체를 이동하거나 회전하는 방법을 설명합니다.
속성 애니메이션 기술 개요 Storyboard, 로컬 애니메이션, 시계 및 프레임당 애니메이션을 사용하는 속성 애니메이션에 대해 설명합니다.
Storyboard 개요 여러 개의 타임라인을 갖는 Storyboard를 사용하여 복잡한 애니메이션을 만드는 방법을 설명 합니다.
타이밍 동작 개요 애니메이션에 사용되는 Timeline 형식과 속성을 설명합니다.
타이밍 이벤트 개요 시작, 일시 중지, 계속, 건너뛰기 또는 중지 등 타임라인의 지점에서 코드를 실행하기 위해 Timeline 및 Clock 개체에서 사용할 수 있는 이벤트를 설명합니다.
방법 항목 애플리케이션에서 애니메이션 및 타임라인을 사용하기 위한 코드 예제가 포함되어 있습니다.
Clock 방법 항목 애플리케이션에서 Clock 개체를 사용하기 위한 코드 예제가 포함되어 있습니다.
키 프레임 방법 항목 애플리케이션에서 키 프레임 애니메이션을 사용하기 위한 코드 예제가 포함되어 있습니다.
경로 애니메이션 방법 항목 애플리케이션에서 경로 애니메이션을 사용하기 위한 코드 예제가 포함되어 있습니다.

참조