경로 애니메이션 개요
이 항목에서는 기하학적 경로를 사용하여 출력 값을 생성할 수 있도록 하는 경로 애니메이션을 소개합니다. 경로 애니메이션은 복잡한 경로를 따라 개체를 이동하고 회전하는 데 유용합니다.
필수 구성 요소
이 항목을 이해하려면 WPF 애니메이션 기능을 잘 알고 있어야 입니다. 애니메이션 기능 소개를 보려면 애니메이션 개요를 참조하세요.
PathGeometry 개체를 사용하여 경로 애니메이션을 정의하므로 PathGeometry 및 다양한 형식의 PathSegment 개체에 대해 잘 알고 있어야 합니다. 자세한 내용은 기하 도형 개요를 참조하세요.
경로 애니메이션이란?
경로 애니메이션은 PathGeometry를 입력으로 사용하는 AnimationTimeline의 형식입니다. From, To 또는 By 속성을 설정(From/To/By 애니메이션의 경우와 유사)하거나 키 프레임을 사용하는 대신(키 프레임 애니메이션의 경우와 유사) 기하학적 경로를 정의한 후 경로 애니메이션의 PathGeometry 속성을 설정하는 데 사용합니다. 경로 애니메이션은 진행되면서 경로에서 x, y 및 각도 정보를 읽고 해당 정보로 출력을 생성합니다.
경로 애니메이션은 복잡한 경로를 따라 개체에 애니메이션 효과를 주는 데 매우 유용합니다. 경로를 따라 개체를 이동하는 한 가지 방법은 MatrixTransform 및 MatrixAnimationUsingPath를 사용하여 복잡한 경로를 따라 개체를 변환하는 것입니다. 다음 예제에서는 MatrixTransform의 Matrix 속성에 애니메이션 효과를 주기 위해 MatrixAnimationUsingPath 개체를 사용하여 이 기술을 보여 줍니다. MatrixTransform이 단추에 적용되어 단추가 곡선 경로를 따라 이동되도록 합니다. DoesRotateWithTangent 속성이 true로 설정되어 있으므로 사각형은 경로의 접선을 따라 회전합니다.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions" Margin="20">
<Canvas Width="400" Height="400">
<!-- The Button that is animated across the screen by animating
the MatrixTransform applied to the button. -->
<Button MinWidth="100" Content="A Button">
<Button.RenderTransform>
<MatrixTransform x:Name="ButtonMatrixTransform">
<MatrixTransform.Matrix >
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="ButtonMatrixTransform"
Storyboard.TargetProperty="Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5"
RepeatBehavior="Forever" >
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry
Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
PresentationOptions:Freeze="True" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace SDKSample
{
/// <summary>
/// Shows how to animate an object along
/// a geometric path.
/// </summary>
public class MatrixAnimationUsingPathDoesRotateWithTangentExample : Page
{
public MatrixAnimationUsingPathDoesRotateWithTangentExample()
{
this.Margin = new Thickness(20);
// Create a NameScope for the page so that
// we can use Storyboards.
NameScope.SetNameScope(this, new NameScope());
// Create a button.
Button aButton = new Button();
aButton.MinWidth = 100;
aButton.Content = "A Button";
// Create a MatrixTransform. This transform
// will be used to move the button.
MatrixTransform buttonMatrixTransform = new MatrixTransform();
aButton.RenderTransform = buttonMatrixTransform;
// Register the transform's name with the page
// so that it can be targeted by a Storyboard.
this.RegisterName("ButtonMatrixTransform", buttonMatrixTransform);
// Create a Canvas to contain the button
// and add it to the page.
// Although this example uses a Canvas,
// any type of panel will work.
Canvas mainPanel = new Canvas();
mainPanel.Width = 400;
mainPanel.Height = 400;
mainPanel.Children.Add(aButton);
this.Content = mainPanel;
// Create the animation path.
PathGeometry animationPath = new PathGeometry();
PathFigure pFigure = new PathFigure();
pFigure.StartPoint = new Point(10, 100);
PolyBezierSegment pBezierSegment = new PolyBezierSegment();
pBezierSegment.Points.Add(new Point(35, 0));
pBezierSegment.Points.Add(new Point(135, 0));
pBezierSegment.Points.Add(new Point(160, 100));
pBezierSegment.Points.Add(new Point(180, 190));
pBezierSegment.Points.Add(new Point(285, 200));
pBezierSegment.Points.Add(new Point(310, 100));
pFigure.Segments.Add(pBezierSegment);
animationPath.Figures.Add(pFigure);
// Freeze the PathGeometry for performance benefits.
animationPath.Freeze();
// Create a MatrixAnimationUsingPath to move the
// button along the path by animating
// its MatrixTransform.
MatrixAnimationUsingPath matrixAnimation =
new MatrixAnimationUsingPath();
matrixAnimation.PathGeometry = animationPath;
matrixAnimation.Duration = TimeSpan.FromSeconds(5);
matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation's DoesRotateWithTangent property
// to true so that rotates the rectangle in addition
// to moving it.
matrixAnimation.DoesRotateWithTangent = true;
// Set the animation to target the Matrix property
// of the MatrixTransform named "ButtonMatrixTransform".
Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform");
Storyboard.SetTargetProperty(matrixAnimation,
new PropertyPath(MatrixTransform.MatrixProperty));
// Create a Storyboard to contain and apply the animation.
Storyboard pathAnimationStoryboard = new Storyboard();
pathAnimationStoryboard.Children.Add(matrixAnimation);
// Start the storyboard when the button is loaded.
aButton.Loaded += delegate(object sender, RoutedEventArgs e)
{
// Start the storyboard.
pathAnimationStoryboard.Begin(this);
};
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Namespace SDKSample
''' <summary>
''' Shows how to animate an object along
''' a geometric path.
''' </summary>
Public Class MatrixAnimationUsingPathDoesRotateWithTangentExample
Inherits Page
Public Sub New()
Me.Margin = New Thickness(20)
' Create a NameScope for the page so that
' we can use Storyboards.
NameScope.SetNameScope(Me, New NameScope())
' Create a button.
Dim aButton As New Button()
aButton.MinWidth = 100
aButton.Content = "A Button"
' Create a MatrixTransform. This transform
' will be used to move the button.
Dim buttonMatrixTransform As New MatrixTransform()
aButton.RenderTransform = buttonMatrixTransform
' Register the transform's name with the page
' so that it can be targeted by a Storyboard.
Me.RegisterName("ButtonMatrixTransform", buttonMatrixTransform)
' Create a Canvas to contain the button
' and add it to the page.
' Although this example uses a Canvas,
' any type of panel will work.
Dim mainPanel As New Canvas()
mainPanel.Width = 400
mainPanel.Height = 400
mainPanel.Children.Add(aButton)
Me.Content = mainPanel
' Create the animation path.
Dim animationPath As New PathGeometry()
Dim pFigure As New PathFigure()
pFigure.StartPoint = New Point(10, 100)
Dim pBezierSegment As New PolyBezierSegment()
pBezierSegment.Points.Add(New Point(35, 0))
pBezierSegment.Points.Add(New Point(135, 0))
pBezierSegment.Points.Add(New Point(160, 100))
pBezierSegment.Points.Add(New Point(180, 190))
pBezierSegment.Points.Add(New Point(285, 200))
pBezierSegment.Points.Add(New Point(310, 100))
pFigure.Segments.Add(pBezierSegment)
animationPath.Figures.Add(pFigure)
' Freeze the PathGeometry for performance benefits.
animationPath.Freeze()
' Create a MatrixAnimationUsingPath to move the
' button along the path by animating
' its MatrixTransform.
Dim matrixAnimation As New MatrixAnimationUsingPath()
matrixAnimation.PathGeometry = animationPath
matrixAnimation.Duration = TimeSpan.FromSeconds(5)
matrixAnimation.RepeatBehavior = RepeatBehavior.Forever
' Set the animation's DoesRotateWithTangent property
' to true so that rotates the rectangle in addition
' to moving it.
matrixAnimation.DoesRotateWithTangent = True
' Set the animation to target the Matrix property
' of the MatrixTransform named "ButtonMatrixTransform".
Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform")
Storyboard.SetTargetProperty(matrixAnimation, New PropertyPath(MatrixTransform.MatrixProperty))
' Create a Storyboard to contain and apply the animation.
Dim pathAnimationStoryboard As New Storyboard()
pathAnimationStoryboard.Children.Add(matrixAnimation)
' Start the storyboard when the button is loaded.
AddHandler aButton.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)
End Sub
End Class
End Namespace
XAML 예제에서 사용되는 경로 구문에 대한 자세한 내용은 경로 태그 구문 개요를 참조하세요. 전체 샘플을 보려면 경로 애니메이션 샘플을 참조하세요.
XAML 및 코드에서 Storyboard를 사용하거나 코드에서 BeginAnimation 메서드를 사용하여 속성에 경로 애니메이션을 적용할 수 있습니다. 경로 애니메이션을 사용하여 AnimationClock을 만든 후 하나 이상의 속성에 적용할 수도 있습니다. 애니메이션 효과를 주기 위한 여러 다양한 방법에 대한 자세한 내용은 속성 애니메이션 기술 개요를 참조하세요.
경로 애니메이션 형식
애니메이션은 속성 값을 생성하므로 속성 형식이 다르면 애니메이션 형식도 다릅니다. Double을 사용하는 속성(예: TranslateTransform의 X 속성)에 애니메이션 효과를 주려면 Double 값을 생성하는 애니메이션을 사용합니다. Point를 사용하는 속성에 애니메이션 효과를 주려면 Point 값 등을 생성하는 애니메이션을 사용합니다.
경로 애니메이션 클래스는 System.Windows.Media.Animation 네임스페이스에 속하고 다음 명명 규칙을 사용합니다.
<Type>AnimationUsingPath
여기서 <Type>은 클래스가 애니메이션을 적용하는 값의 형식입니다.
WPF에서는 다음 경로 애니메이션 클래스를 제공합니다.
MatrixAnimationUsingPath는 PathGeometry에서 Matrix 값을 생성합니다. MatrixTransform과 함께 사용하면 MatrixAnimationUsingPath가 경로를 따라 개체를 이동할 수 있습니다. MatrixAnimationUsingPath의 DoesRotateWithTangent 속성을 true로 설정하면 경로의 곡선을 따라 개체도 회전합니다.
PointAnimationUsingPath는 PathGeometry의 x 및 y 좌표에서 Point 값을 생성합니다. PointAnimationUsingPath를 사용하여 Point 값을 사용하는 속성에 애니메이션 효과를 주는 방식으로 경로를 따라 개체를 이동할 수 있습니다. PointAnimationUsingPath는 개체를 회전할 수 없습니다.
DoubleAnimationUsingPath는 PathGeometry에서 Double 값을 생성합니다. Source 속성을 설정하여 DoubleAnimationUsingPath가 경로의 x 좌표, y 좌표 또는 각도 중에서 어떤 항목을 출력으로 사용할지를 지정할 수 있습니다. DoubleAnimationUsingPath를 사용하여 개체를 회전하거나 x-축 또는 y-축을 따라 이동할 수 있습니다.
경로 애니메이션 입력
각 경로 애니메이션 클래스는 입력을 지정하기 위한 PathGeometry 속성을 제공합니다. 경로 애니메이션은 PathGeometry를 사용하여 출력 값을 생성합니다. PathGeometry 클래스를 사용하여 원호, 곡선 및 선으로 구성된 여러 복잡한 그림을 설명할 수 있습니다.
PathGeometry의 중심에는 PathFigure 개체 컬렉션이 있습니다. 이러한 개체는 각 그림이 PathGeometry의 개별 도형을 설명하기 때문에 이와 같이 명명됩니다. 각 PathFigure는 각각이 그림의 세그먼트를 설명하는 하나 이상의 PathSegment 개체로 구성됩니다.
세그먼트 형식은 다양합니다.
| 세그먼트 형식 | 설명 |
|---|---|
| ArcSegment | 두 점 사이에 타원형 호를 만듭니다. |
| BezierSegment | 두 점 사이에 입방형 3차원 곡선을 만듭니다. |
| LineSegment | 두 점 사이에 선을 만듭니다. |
| PolyBezierSegment | 일련의 입방형 3차원 곡선을 만듭니다. |
| PolyLineSegment | 일련의 줄을 만듭니다. |
| PolyQuadraticBezierSegment | 일련의 정방형 3차원 곡선을 만듭니다. |
| QuadraticBezierSegment | 정방형 3차원 곡선을 만듭니다. |
PathFigure의 세그먼트는 단일 기하 도형으로 결합되며 세그먼트의 끝점이 다음 세그먼트의 시작점으로 사용됩니다. PathFigure의 StartPoint 속성은 첫 번째 세그먼트를 그릴 점을 지정합니다. 각 후속 세그먼트는 이전 세그먼트의 끝점에서 시작합니다. 예를 들어, 10,50에서 10,150 사이의 세로 선은 StartPoint 속성을 10,50으로 설정하고 Point 속성 설정이 10,150인 LineSegment를 만들어 정의할 수 있습니다.
PathGeometry 개체에 대한 자세한 내용은 기하 도형 개요를 참조하세요.
XAML에서는 특별한 약식 구문을 사용하여 PathGeometry의 Figures 속성을 설정할 수도 있습니다. 자세한 내용은 경로 태그 구문 개요를 참조하세요.
XAML 예제에서 사용되는 경로 구문에 대한 자세한 내용은 경로 태그 구문 개요를 참조하세요.
참고 항목
.NET Desktop feedback
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기