속성 애니메이션 기술 개요

업데이트: 2007년 11월

이 항목에서는 Storyboard, 로컬 애니메이션, Clock, 프레임당 애니메이션 등 속성에 애니메이션 효과를 주기 위한 다양한 방식을 설명합니다.

사전 요구 사항

이 항목의 내용을 이해하려면 애니메이션 개요에 설명되어 있는 기초적인 애니메이션 기능에 대해 잘 알고 있어야 합니다.

애니메이션 효과를 주기 위한 여러 가지 방법

속성에 애니메이션 효과를 주기 위한 여러 가지 시나리오가 있기 때문에 WPF는 여러 가지 방식으로 속성에 애니메이션 효과를 줍니다.

각 방식에 대해 다음 표는 해당 방식을 스타일, 컨트롤 템플릿 또는 데이터 템플릿에서 인스턴스별로 사용할 수 있는지, 해당 방식을 XAML에서 사용할 수 있는지, 해당 방식을 통해 애니메이션을 대화형으로 제어할 수 있는지를 나타냅니다. "인스턴스별"은 애니메이션이나 Storyboard를 스타일, 컨트롤 템플릿 또는 데이터 템플릿에 적용하지 않고 개체의 인스턴스에 직접 적용하는 기술을 말합니다.

애니메이션 기술	시나리오	XAML 지원	대화형으로 제어 가능
Storyboard 애니메이션	인스턴스별, Style, ControlTemplate, DataTemplate	예	예
로컬 애니메이션	인스턴스별	아니요	아니요
Clock 애니메이션	인스턴스별	아니요	예
프레임별 애니메이션.	인스턴스별	아니요	N/A

Storyboard 애니메이션

XAML에서 애니메이션을 정의하고 적용하거나 애니메이션을 시작한 후에 대화형으로 제어하거나 복잡한 애니메이션 트리를 만들거나 Style, ControlTemplate 또는 DataTemplate에서 애니메이션 효과를 주려면 Storyboard를 사용하십시오. 개체가 Storyboard에 의해 애니메이션 효과를 얻으려면 FrameworkElement 또는 FrameworkContentElement이거나 FrameworkElement 또는 FrameworkContentElement를 설정하는 데 사용되어야 합니다. 자세한 내용은 Storyboard 개요를 참조하십시오.

Storyboard는 포함하고 있는 애니메이션에 대한 대상 정보를 제공하는 컨테이너 Timeline의 특수 형식입니다. Storyboard를 사용하여 애니메이션 효과를 주려면 다음의 세 단계를 수행하십시오.

1. Storyboard 및 하나 이상의 애니메이션을 선언합니다.

2. TargetName 및 TargetProperty 연결된 속성을 사용하여 각 애니메이션의 대상 개체 및 속성을 지정합니다.

3. (코드 전용) FrameworkElement 또는 FrameworkContentElement에 대한 NameScope를 정의합니다. 해당 FrameworkElement 또는 FrameworkContentElement로 애니메이션 효과를 줄 개체의 이름을 등록합니다.

4. Storyboard를 시작합니다.

Storyboard를 시작하면 애니메이션 효과를 주는 속성에 애니메이션이 적용되고 해당 속성이 시작됩니다. 두 가지 방법으로 Storyboard를 시작할 수 있습니다. Storyboard 클래스에서 제공하는 Begin 메서드를 사용하거나 BeginStoryboard 작업을 사용할 수 있습니다. XAML에서 애니메이션 효과를 주는 유일한 방법은 BeginStoryboard 작업을 사용하는 것입니다. BeginStoryboard 작업은 EventTrigger, 속성 Trigger 또는 DataTrigger에서 사용될 수 있습니다.

다음 표에서는 각 Storyboard 시작 기술이 지원되는 다양한 위치(인스턴스별, 스타일, 컨트롤 템플릿 및 데이터 템플릿)를 보여 줍니다.

다음을 사용하여 Storyboard 시작	인스턴스별	Style	컨트롤 템플릿	데이터 템플릿	예제
BeginStoryboard 및 EventTrigger	예	예	예	예	방법: Storyboard를 사용하여 속성에 애니메이션 효과 주기
BeginStoryboard 및 속성 Trigger	아니요	예	예	예	방법: 속성 값이 변경될 때 애니메이션 트리거
BeginStoryboard 및 DataTrigger	아니요	예	예	예	방법: 데이터가 변경될 때 애니메이션 트리거
Begin 메서드	예	아니요	아니요	아니요	방법: Storyboard를 사용하여 속성에 애니메이션 효과 주기

Storyboard 개체에 대한 자세한 내용은 Storyboard 개요를 참조하십시오.

로컬 애니메이션

로컬 애니메이션은 Animatable 개체의 종속성 속성에 애니메이션 효과를 줄 수 있는 편리한 방법입니다. 속성에 단일 애니메이션을 적용하기를 원하며 애니메이션이 시작된 후에 애니메이션을 대화형으로 제어할 필요가 없을 때 로컬 애니메이션을 사용하십시오. Storyboard 애니메이션과 달리 로컬 애니메이션은 FrameworkElement 또는 FrameworkContentElement와 연관되지 않은 개체에 애니메이션 효과를 줄 수 있습니다. 이 형식의 애니메이션에 대해서는 NameScope를 정의할 필요도 없습니다.

로컬 애니메이션은 코드에서만 사용될 수 있고 스타일, 컨트롤 템플릿 또는 데이터 템플릿에서 정의될 수 없습니다. 로컬 애니메이션은 시작된 이후에 대화형으로 제어할 수 없습니다.

로컬 애니메이션을 사용하여 애니메이션 효과를 주려면 다음 단계를 수행하십시오.

1. AnimationTimeline 개체를 만듭니다.

2. 애니메이션 효과를 줄 개체의 BeginAnimation 메서드를 사용하여 지정한 속성에 AnimationTimeline을 적용합니다.

다음 예제에서는 Button의 너비와 배경색에 애니메이션 효과를 주는 방법을 보여 줍니다.

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Imports System
Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls

Namespace Microsoft.Samples.Animation.LocalAnimations

    ' Create the demonstration.
    Public Class LocalAnimationExample
        Inherits Page

        Public Sub New()

            WindowTitle = "Animate Property Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(20)

            ' Create and set the Button.
            Dim aButton As New Button()
            aButton.Content = "A Button"

            ' Animate the Button's Width.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 75
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
            myDoubleAnimation.AutoReverse = True
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)

            ' Create and animate a Brush to set the button's Background.
            Dim myBrush As New SolidColorBrush()
            myBrush.Color = Colors.Blue

            Dim myColorAnimation As New ColorAnimation()
            myColorAnimation.From = Colors.Blue
            myColorAnimation.To = Colors.Red
            myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
            myColorAnimation.AutoReverse = True
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
            aButton.Background = myBrush

            ' Add the Button to the panel.
            myStackPanel.Children.Add(aButton)
            Me.Content = myStackPanel
        End Sub
    End Class
End Namespace

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

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

namespace Microsoft.Samples.Animation.LocalAnimations
{

    // Create the demonstration.
    public class LocalAnimationExample : Page 
    {




        public LocalAnimationExample()
        {


            WindowTitle = "Local Animation Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);                     


            // Create and set the Button.
            Button aButton = new Button();
            aButton.Content = "A Button";

            // Animate the Button's Width.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 75;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration =  new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);       

            // Create and animate a Brush to set the button's Background.
            SolidColorBrush myBrush = new SolidColorBrush();
            myBrush.Color = Colors.Blue;            

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration =  new Duration(TimeSpan.FromMilliseconds(7000));
            myColorAnimation.AutoReverse = true;
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);           
            aButton.Background = myBrush;

            // Add the Button to the panel.
            myStackPanel.Children.Add(aButton);
            this.Content = myStackPanel;
        }
    }

}

Clock 애니메이션

Storyboard를 사용하지 않고 애니메이션 효과를 주기를 원하고 복잡한 타이밍 트리를 만들거나 애니메이션이 시작된 후에 애니메이션을 대화형으로 제어하려면 Clock 개체를 사용하십시오. Clock 개체를 사용하여 Animatable 개체의 종속성 속성에 애니메이션 효과를 줄 수 있습니다.

Clock 개체를 직접적으로 사용하여 스타일, 컨트롤 템플릿 또는 데이터 템플릿에서 애니메이션 효과를 줄 수는 없습니다. 애니메이션 및 타이밍 시스템은 실제로 Clock 개체를 사용하여 스타일, 컨트롤 템플릿 및 데이터 템플릿에서 애니메이션 효과를 주지만 해당 Clock 개체를 Storyboard에서 만들어야 합니다. Storyboard 개체와 Clock 개체 간의 관계에 대한 자세한 내용은 애니메이션 및 타이밍 시스템 개요를 참조하십시오.

속성에 단일 Clock을 적용하려면 다음 단계를 수행하십시오.

1. AnimationTimeline 개체를 만듭니다.

2. AnimationTimeline의 CreateClock 메서드를 사용하여 AnimationClock을 만듭니다.

3. 애니메이션 효과를 줄 개체의 ApplyAnimationClock 메서드를 사용하여 지정한 속성에 AnimationClock을 적용합니다.

다음 예제에서는 AnimationClock을 만들어서 두 개의 비슷한 속성에 적용하는 방법을 보여 줍니다.

/*
    This example shows how to create and apply
    an AnimationClock.
*/

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


namespace Microsoft.Samples.Animation.TimingBehaviors
{
    public class AnimationClockExample : Page
    {

        ScaleTransform myScaleTransform;

        public AnimationClockExample()
        {

            this.WindowTitle = "Opacity Animation Example";
            this.Background = Brushes.White;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create a button that with a ScaleTransform.
            // The ScaleTransform will animate when the
            // button is clicked.
            Button myButton = new Button();
            myButton.Margin = new Thickness(50);
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.Content = "Click Me";           
            myScaleTransform = new ScaleTransform(1,1);
            myButton.RenderTransform = myScaleTransform;


            // Associate an event handler with the
            // button's Click event.
            myButton.Click += new RoutedEventHandler(myButton_Clicked);

            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;
        }

        // Create and apply and animation when the button is clicked.
        private void myButton_Clicked(object sender, RoutedEventArgs e)
        {

            // Create a DoubleAnimation to animate the
            // ScaleTransform.
            DoubleAnimation myAnimation = 
                new DoubleAnimation(
                    1, // "From" value
                    5, // "To" value 
                    new Duration(TimeSpan.FromSeconds(5))
                );
            myAnimation.AutoReverse = true;

            // Create a clock the for the animation.
            AnimationClock myClock = myAnimation.CreateClock();            

            // Associate the clock the ScaleX and
            // ScaleY properties of the button's
            // ScaleTransform.
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleXProperty, myClock);
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleYProperty, myClock);
        }
    }
}

타이밍 트리를 만들어서 속성에 애니메이션 효과를 주는 데 사용하려면 다음 단계를 수행하십시오.

1. ParallelTimeline 및 AnimationTimeline 개체를 사용하여 타이밍 트리를 만듭니다.

2. 루트 ParallelTimeline의 CreateClock을 사용하여 ClockGroup을 만듭니다.

3. ClockGroup의 Children을 반복하고 해당 자식 Clock 개체를 적용합니다. 각 AnimationClock 자식 항목에 대해 애니메이션 효과를 줄 개체의 ApplyAnimationClock 메서드를 사용하여 지정한 속성에 AnimationClock을 적용합니다.

Clock 개체에 대한 자세한 내용은 애니메이션 및 타이밍 시스템 개요를 참조하십시오.

프레임별 애니메이션: 애니메이션 및 타이밍 시스템 건너뛰기

WPF 애니메이션 시스템을 완전히 건너뛰어야 할 때 이 방식을 사용하십시오. 이 방식의 한 가지 시나리오는 물리학 애니메이션입니다. 이 애니메이션에서는 각 단계마다 마지막 개체 상호 작용 집합에 따라 개체를 다시 계산해야 합니다.

프레임별 애니메이션은 스타일, 컨트롤 템플릿 또는 데이터 템플릿 내에서 정의될 수 없습니다.

프레임별로 애니메이션 효과를 주려면 애니메이션 효과를 줄 개체가 들어 있는 개체의 Rendering 이벤트를 등록하십시오. 이 이벤트 처리기 메서드는 프레임당 한 번씩 호출됩니다. WPF가 시각적 트리에 있는 일관된 렌더링 데이터를 컴포지션 트리를 통해 마샬링하는 경우 이벤트 처리기 메서드가 호출됩니다.

이벤트 처리기에서 애니메이션 효과에 필요한 모든 계산을 수행하고 애니메이션 효과를 줄 개체의 속성을 해당 값으로 설정하십시오.

현재 프레임의 표시 시간을 얻기 위해 이 이벤트와 연결된 EventArgs가 RenderingEventArgs로 캐스팅되어 현재 프레임의 렌더링 시간을 얻는 데 사용할 수 있는 RenderingTime 속성을 제공합니다.

자세한 내용은 Rendering 페이지를 참조하십시오. 이에 대한 예제를 보려면 프레임별 애니메이션 샘플을 참조하십시오.

참고 항목

개념

애니메이션 개요

Storyboard 개요

애니메이션 및 타이밍 시스템 개요

종속성 속성 개요