From/To/By 애니메이션 개요
이 항목에서는 From/To/By 애니메이션을 사용하여 종속성 속성에 애니메이션 효과를 적용하는 방법을 설명합니다. From/To/By 애니메이션은 두 값 간에 변환을 생성합니다.
필수 구성 요소
이 항목을 이해하려면 WPF 애니메이션 기능을 잘 알고 있어야 입니다. 애니메이션 기능 소개를 보려면 애니메이션 개요를 참조하세요.
From/To/By 애니메이션이란?
From/To/By 애니메이션은 AnimationTimeline 형식으로, 시작 값과 끝 값 간에 전환을 만듭니다. 전환이 완료되는 데 걸리는 시간은 해당 애니메이션의 Duration에 의해 결정됩니다.
태그 및 코드에서 Storyboard를 사용하거나 코드에서 BeginAnimation 메서드를 사용하여 속성에 From/To/By 애니메이션을 적용할 수 있습니다. From/To/By 애니메이션을 사용하여 AnimationClock을 만들고 하나 이상의 속성에 적용할 수도 있습니다. 애니메이션 효과를 주기 위한 여러 다양한 방법에 대한 자세한 내용은 속성 애니메이션 기술 개요를 참조하세요.
From/To/By 애니메이션은 2개 이하의 대상 값을 가질 수 있습니다. 2개를 초과하는 대상 값을 갖는 애니메이션이 필요한 경우 키 프레임 애니메이션을 사용합니다. 키 프레임 애니메이션은 키 프레임 애니메이션 개요에 설명되어 있습니다.
From/To/By 애니메이션 형식
애니메이션은 속성 값을 생성하므로 속성 형식이 다르면 애니메이션 형식도 다릅니다. Double을 사용하는 속성(예: 요소의 Width 속성)에 애니메이션 효과를 주려면 Double 값을 생성하는 애니메이션을 사용합니다. Point를 사용하는 속성에 애니메이션 효과를 주려면 Point 값 등을 생성하는 애니메이션을 사용합니다.
From/To/By 애니메이션 클래스는 System.Windows.Media.Animation 네임스페이스에 속하고 다음 명명 규칙을 사용합니다.
<Type>Animation
여기서 <Type>은 클래스가 애니메이션을 적용하는 값의 형식입니다.
WPF에서는 다음 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 x 100인 Rectangle의 Width 속성에 애니메이션 효과를 적용합니다.
각 예제에서는 DoubleAnimation을 사용하지만 모든 From/To/By 애니메이션의 From, To 및 By 속성은 동일하게 작동합니다. 이러한 각 예제는 Storyboard를 사용하지만 다른 방법으로 From/To/By 애니메이션을 사용할 수도 있습니다. 자세한 내용은 속성 애니메이션 기술 개요를 참조하세요.
시작/끝
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.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As 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))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
대상
To 속성만 설정하면 애니메이션은 애니메이션 속성의 기준 값 또는 이전에 같은 속성에 적용된 구성 애니메이션의 출력부터 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.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
기준
애니메이션의 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.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
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.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As 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))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
시작
애니메이션의 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.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.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.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
To/By
애니메이션의 To 및 By 속성을 모두 설정하면 By 속성이 무시됩니다.
기타 애니메이션 형식
From/To/By 애니메이션은 WPF에서 제공하는 애니메이션 형식뿐만 아니라 키 프레임 애니메이션 및 경로 애니메이션도 제공합니다.
키 프레임 애니메이션은 키 프레임을 사용하여 설명되는 제한 없는 수의 대상 값에 따라 애니메이션을 적용합니다. 자세한 내용은 키 프레임 애니메이션 개요를 참조하세요.
경로 애니메이션은 PathGeometry에서 출력 값을 생성합니다. 자세한 내용은 경로 애니메이션 개요를 참조하세요.
WPF에서는 고유한 사용자 지정 애니메이션 형식도 만들 수 있습니다. 자세한 내용은 사용자 지정 애니메이션 개요를 참조하세요.
참고 항목
.NET Desktop feedback
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기