From/To/By 애니메이션 개요
업데이트: 2007년 11월
이 항목에서는 From/To/By 애니메이션을 사용하여 종속성 속성에 애니메이션 효과를 주는 방법을 보여 줍니다. From/To/By 애니메이션은 두 값 간에 전환을 생성합니다.
이 항목에는 다음 단원이 포함되어 있습니다.
사전 요구 사항
이 항목의 내용을 이해하려면 WPF의 애니메이션 기능에 대해 잘 알고 있어야 합니다. 애니메이션 기능에 대한 소개는 애니메이션 개요를 참조하십시오.
From/To/By 애니메이션 정의
From/To/By 애니메이션은 시작 값과 끝 값 간에 전환을 생성하는 일종의 AnimationTimeline입니다. 전환이 완료되는 데 필요한 시간은 애니메이션의 Duration에 따라 결정됩니다.
태그와 코드에 Storyboard를 사용하거나 코드에 BeginAnimation 메서드를 사용하여 속성에 From/To/By 애니메이션을 적용할 수 있습니다. AnimationClock을 만들어 하나 이상의 속성에 적용하려는 경우에도 From/To/By 애니메이션을 사용할 수 있습니다. 애니메이션을 적용하는 다양한 방법에 대한 자세한 내용은 속성 애니메이션 기술 개요를 참조하십시오.
From/To/By 애니메이션에는 대상 값을 두 개까지만 지정할 수 있습니다. 애니메이션에 대상 값을 세 개 이상 지정해야 하는 경우에는 키 프레임 애니메이션을 사용하십시오. 키 프레임 애니메이션에 대한 설명은 키 프레임 애니메이션 개요를 참조하십시오.
From/To/By 애니메이션의 형식
애니메이션은 속성 값을 생성하므로 여러 속성 형식에 대해 여러 가지 애니메이션 형식이 존재합니다. 요소의 Width 속성과 같이 Double을 사용하는 속성에 애니메이션 효과를 적용하려면 Double 값을 생성하는 애니메이션을 사용합니다. Point를 사용하는 속성에 애니메이션 효과를 적용하려면 Point 값 등을 생성하는 애니메이션을 사용합니다.
From/To/By 애니메이션 클래스는 System.Windows.Media.Animation 네임스페이스에 속하며 다음 명명 규칙을 사용합니다.
*<Type>*Animation
여기서 *<Type>*은 클래스가 애니메이션 효과를 적용하는 값의 형식입니다.
WPF는 다음 From/To/By 애니메이션 클래스를 제공합니다.
속성 형식 |
해당 From/To/By 애니메이션 클래스 |
|---|---|
대상 값
From/To/By 애니메이션은 두 대상 값 간에 전환을 생성합니다. 일반적으로 시작 값(From 속성을 사용하여 설정)과 끝 값(To 속성을 사용하여 설정)을 지정합니다. 하지만 시작 값, 대상 값 또는 오프셋 값 중 하나만 지정할 수도 있습니다. 이 경우 애니메이션은 없는 대상 값을 애니메이션 효과가 적용되는 속성에서 가져옵니다. 아래에서는 애니메이션의 대상 값을 지정하는 여러 방법을 보여 줍니다.
시작 값
애니메이션의 시작 값을 명시적으로 지정하려면 From 속성을 사용합니다. From 속성을 단독으로 사용하거나 To 또는 By 속성과 함께 사용할 수 있습니다. From 속성만 지정하는 경우 해당 값에서 애니메이션 효과가 적용되는 속성의 기준 값으로 애니메이션이 전환됩니다.
끝 값
애니메이션의 끝 값을 지정하려면 애니메이션의 To 속성을 사용합니다. To 속성을 단독으로 사용하는 경우 애니메이션은 애니메이션 효과가 적용되는 속성이나 동일한 속성에 적용된 다른 애니메이션의 출력에서 시작 값을 가져옵니다. To 속성을 From 속성과 함께 사용하여 애니메이션의 시작 값과 끝 값을 명시적으로 지정할 수 있습니다.
오프셋 값
By 속성을 사용하면 애니메이션의 명시적 시작 값 또는 끝 값 대신 오프셋을 지정할 수 있습니다. 애니메이션의 By 속성은 애니메이션 실행 기간 동안 애니메이션이 어느 정도까지 값을 변경해야 하는지를 지정합니다. By 속성을 단독으로 사용하거나 From 속성과 함께 사용할 수 있습니다. By 속성만 지정하는 경우 애니메이션이 속성의 기준 값 또는 다른 애니메이션의 출력에 해당 오프셋 값을 추가합니다.
From/To/By 값 사용
다음 단원에서는 From, To 및 By 속성을 함께 또는 개별적으로 사용하는 방법을 설명합니다.
이 단원의 각 예제에서는 From/To/By 애니메이션 형식인 DoubleAnimation을 사용하여 세로가 10 장치 독립적 픽셀이고 가로가 100 장치 독립적 픽셀인 Rectangle의 Width 속성에 애니메이션 효과를 줍니다.
예제마다 DoubleAnimation을 사용하고 있지만 모든 From/To/By 애니메이션의 From, To 및 By 속성은 동일하게 작동합니다. 각 예제에서는 Storyboard를 사용하지만 From/To/By 애니메이션을 다른 방법으로 사용할 수도 있습니다. 자세한 내용은 속성 애니메이션 기술 개요를 참조하십시오.
From/To
From 값과 To 값을 함께 설정하면 From 속성에 지정된 값에서 To 속성에 지정된 값으로 애니메이션이 진행됩니다.
다음 예제에서는 DoubleAnimation의 From 속성을 50으로 설정하고 To 속성을 300으로 설정합니다. 그 결과 Rectangle의 Width에 50에서 300까지 애니메이션 효과가 적용됩니다.
// Demonstrates the From and To properties used together.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;
// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the From and To properties used together. -->
<Rectangle Name="fromToAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Black">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the From and To properties used together.
Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="fromToAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" To="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
To
To 속성만 설정하는 경우 애니메이션 효과가 적용되는 속성의 기준 값 또는 이전에 동일한 속성에 적용된 구성 애니메이션(Composing Animatioin)의 출력에서 To 속성에 지정된 값까지 애니메이션이 진행됩니다.
"구성 애니메이션"은 현재 애니메이션을 적용할 당시 지금까지 효과가 있는 동일한 속성에 Compose 전달 동작을 사용하여 이전에 적용된 Active 또는 Filling 애니메이션을 나타냅니다.
다음 예제에서는 DoubleAnimation의 To 속성만 300으로 설정합니다. 시작 값이 지정되지 않았으므로 DoubleAnimation은 Width 속성의 기준 값(100)을 시작 값으로 사용합니다. Rectangle의 Width에는 100에서 애니메이션 대상 값인 300까지 애니메이션 효과가 적용됩니다.
// Demonstrates the use of the To property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"toAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Gray;
// Demonstrates the To property used by itself. Animates
// the Rectangle's Width property from its base value
// (100) to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the use of the To property. -->
<Rectangle Name="toAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Gray">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the To property used by itself.
Animates the Rectangle's Width property from its base value
(100) to 300 over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="toAnimatedRectangle"
Storyboard.TargetProperty="Width"
To="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
By
애니메이션의 By 속성만 설정하는 경우 애니메이션 효과를 적용 중인 속성의 기준 값 또는 구성 애니메이션의 출력에서 이 두 값 중 하나와 By 속성에 지정된 값을 더한 값까지 애니메이션이 진행됩니다.
다음 예제에서는 DoubleAnimation의 By 속성만 300으로 설정합니다. 이 예제에서는 시작 값을 지정하지 않았으므로 DoubleAnimation이 Width 속성의 기준 값(100)을 시작 값으로 사용합니다. 끝 값은 애니메이션의 By 값인 300에 시작 값인 100을 더한 400으로 결정됩니다. 그 결과 Rectangle의 Width에 100에서 400까지 애니메이션 효과가 적용됩니다.
// Demonstrates the use of the By property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.RoyalBlue;
// Demonstrates the By property used by itself.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from its base value
// (100) to 400 (100 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the use of the By property. -->
<Rectangle Name="byAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="RoyalBlue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the By property used by itself.
Increments the Rectangle's Width property by 300 over 10 seconds.
As a result, the Width property is animated from its base value
(100) to 400 (100 + 300) over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="byAnimatedRectangle"
Storyboard.TargetProperty="Width"
By="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
From/By
애니메이션의 From 및 By 속성을 설정하는 경우 From 속성에 지정된 값에서 From 및 By 속성에 지정된 값을 더한 값까지 애니메이션이 진행됩니다.
다음 예제에서는 DoubleAnimation의 From 속성을 50으로 설정하고 By 속성을 300으로 설정합니다. 끝 값은 애니메이션의 By 값인 300에 시작 값인 50을 더한 350으로 결정됩니다. 그 결과 Rectangle의 Width에 50에서 350까지 애니메이션 효과가 적용됩니다.
// Demonstrates the use of the From and By properties.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.BlueViolet;
// Demonstrates the From and By properties used together.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from 50
// to 350 (50 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the use of the From and By properties. -->
<Rectangle Name="fromByAnimatedRectangle" Grid.Row="6" Grid.Column="2"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="BlueViolet">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the From and By properties used by together.
Increments the Rectangle's Width property by 300 over 10 seconds.
As a result, the Width property is animated from 50
to 350 (50 + 300) over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="fromByAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" By="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
From
애니메이션의 From 값만 설정하는 경우 From 속성에 지정된 값에서 애니메이션 효과를 적용 중인 속성의 기준 값 또는 구성 애니메이션의 출력까지 애니메이션이 진행됩니다.
다음 예제에서는 DoubleAnimation의 From 속성만 50으로 설정합니다. 끝 값이 지정되지 않았으므로 DoubleAnimation은 Width 속성의 기준 값(100)을 끝 값으로 사용합니다. Rectangle의 Width에는 50에서 Width 속성의 기준 값인 100까지 애니메이션 효과가 적용됩니다.
// Demonstrates the use of the From property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"fromAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Purple;
// Demonstrates the From property used by itself. Animates the
// rectangle's Width property from 50 to its base value (100)
// over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
<!-- Demonstrates the use of the From property. -->
<Rectangle Name="fromAnimatedRectangle" Grid.Row="8" Grid.Column="2"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Purple">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the From property used by itself.
Animates the rectangle's Width property from 50 to its base value (100)
over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="fromAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
To/By
애니메이션의 To 속성과 By 속성을 모두 설정하면 By 속성이 무시됩니다.
다른 애니메이션 형식
WPF는 From/To/By 애니메이션 외에도 키 프레임 애니메이션과 경로 애니메이션이라는 다른 형식의 애니메이션도 제공합니다.
키 프레임 애니메이션은 키 프레임을 사용하여 정의된 일련의 대상 값을 따라 애니메이션 효과를 적용합니다. 자세한 내용은 키 프레임 애니메이션 개요를 참조하십시오.
경로 애니메이션은 PathGeometry에서 출력 값을 생성합니다. 자세한 내용은 경로 애니메이션 개요를 참조하십시오.
WPF를 사용하면 고유한 형식의 사용자 지정 애니메이션도 만들 수 있습니다. 자세한 내용은 사용자 지정 애니메이션 개요를 참조하십시오.