경로 애니메이션 개요
이 항목에서는 기하학적 경로를 사용하여 출력 값을 생성할 수 있는 경로 애니메이션을 소개합니다. 경로 애니메이션은 복잡한 경로를 따라 개체를 이동하고 회전할 때 유용합니다.
사전 요구 사항
이 항목의 내용을 이해하려면 WPF의 애니메이션 기능에 대해 잘 알고 있어야 합니다. 애니메이션 기능에 대한 소개는 애니메이션 개요를 참조하십시오.
PathGeometry 개체를 사용하여 경로 애니메이션을 정의하기 때문에 PathGeometry 및 여러 형식의 PathSegment 개체에 대해서도 알고 있어야 합니다. 자세한 내용은 Geometry 개요을 참조하십시오.
경로 애니메이션 정의
경로 애니메이션은 PathGeometry를 입력으로 사용하는 AnimationTimeline 형식입니다. From/To/By 애니메이션에서처럼 From, To 또는 By 속성을 설정하거나 키 프레임 애니메이션에서처럼 키 프레임을 사용하는 대신 기하학적 경로를 정의하고 이 경로를 사용하여 경로 애니메이션의 PathGeometry 속성을 설정합니다. 경로 애니메이션은 진행되면서 경로에서 x, y 및 각도 정보를 읽고 이 정보를 사용하여 출력을 생성합니다.
경로 애니메이션은 복잡한 경로를 따라 개체에 애니메이션 효과를 줄 때 매우 유용합니다. 경로를 따라 개체를 이동하는 한 가지 방법은 MatrixTransform 및 MatrixAnimationUsingPath를 사용하여 개체를 복잡한 경로를 따라 변환하는 것입니다. 다음 예제에서는 MatrixAnimationUsingPath 개체를 사용하여 MatrixTransform의 Matrix 속성에 애니메이션 효과를 적용함으로써 이 방법을 보여 줍니다. MatrixTransform은 단추에 적용되므로 단추가 곡선 경로를 따라 움직입니다. DoesRotateWithTangent 속성은 true로 설정되기 때문에 사각형이 경로의 탄젠트를 따라 회전합니다.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="https://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>
Imports System
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
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);
};
}
}
}
XAML 예제에 사용된 경로 구문에 대한 자세한 내용은 경로 태그 구문 개요를 참조하십시오. 전체 샘플을 보려면 Path Animation 샘플을 참조하십시오.
XAML 및 코드에 Storyboard를 사용하거나 코드에 BeginAnimation 메서드를 사용하여 속성에 경로 애니메이션을 적용할 수 있습니다. 또한 경로 애니메이션을 사용하여 AnimationClock을 만들고 이를 하나 이상의 속성에 적용할 수도 있습니다. 애니메이션을 적용하는 다양한 방법에 대한 자세한 내용은 속성 애니메이션 기술 개요를 참조하십시오.
경로 애니메이션 형식
애니메이션은 속성 값을 생성하므로 속성 형식에 따라 애니메이션의 형식도 달라집니다. TranslateTransform의 X 속성과 같이 Double을 사용하는 속성에 애니메이션 효과를 적용하려면 Double 값을 생성하는 애니메이션을 사용합니다. Point를 사용하는 속성에 애니메이션 효과를 적용하려면 Point 값 등을 생성하는 애니메이션을 사용합니다.
경로 애니메이션 클래스는 System.Windows.Media.Animation 네임스페이스에 속하며 다음 명명 규칙을 사용합니다.
*<Type>*AnimationUsingPath
여기서 *<Type>*은 클래스가 애니메이션 효과를 주는 값의 형식입니다.
WPF에서는 다음 경로 애니메이션 클래스를 제공합니다.
속성 형식 |
해당 경로 애니메이션 클래스 |
예제 |
|---|---|---|
MatrixAnimationUsingPath는 PathGeometry에서 Matrix 값을 생성합니다. MatrixAnimationUsingPath가 MatrixTransform과 함께 사용되는 경우 개체를 경로를 따라 이동할 수 있습니다. 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 개체로 구성되며 각 개체는 그림의 세그먼트를 나타냅니다.
세그먼트에는 여러 가지 형식이 있습니다.
세그먼트 형식 |
설명 |
|---|---|
두 점 사이에 타원형 원호를 만듭니다. |
|
두 점 사이에 입방형 3차원 곡선을 만듭니다. |
|
두 점 사이에 선을 만듭니다. |
|
일련의 입방형 3차원 곡선을 만듭니다. |
|
일련의 선을 만듭니다. |
|
일련의 정방형 3차원 곡선을 만듭니다. |
|
정방형 3차원 곡선을 만듭니다. |
PathFigure의 세그먼트는 하나의 기하학적 도형으로 결합되며 세그먼트의 끝점이 다음 세그먼트의 시작점으로 사용됩니다. PathFigure의 StartPoint 속성은 첫 번째 세그먼트가 그려지는 점을 지정합니다. 이후의 각 세그먼트는 이전 세그먼트의 끝점에서 시작됩니다. 예를 들어 10,50에서 10,150까지 이어지는 수직선을 정의하려면 StartPoint 속성을 10,50으로 설정하고 Point 속성이 10,150으로 설정된 LineSegment를 만듭니다.
PathGeometry 개체에 대한 자세한 내용은 Geometry 개요를 참조하십시오.
XAML에서는 특별한 약식 구문을 사용하여 PathGeometry의 Figures 속성을 설정할 수도 있습니다. 자세한 내용은 경로 태그 구문 개요를 참조하십시오.
XAML 예제에 사용된 경로 구문에 대한 자세한 내용은 경로 태그 구문 개요를 참조하십시오.