경로 애니메이션 개요Path Animations Overview

이 항목에서는 기하학적 경로를 사용하여 출력 값을 생성할 수 있도록 하는 경로 애니메이션을 소개합니다.This topic introduces path animations, which enable you to use a geometric path to generate output values. 경로 애니메이션은 복잡한 경로를 따라 개체를 이동하고 회전하는 데 유용합니다.Path animations are useful for moving and rotating objects along complex paths.

필수 구성 요소Prerequisites

이 항목을 이해 하려면에 대해 잘 알고 있어야 WPFWPF 애니메이션 기능입니다.To understand this topic, you should be familiar with WPFWPF animations features. 애니메이션 기능에 대 한 소개를 참조 하십시오.는 애니메이션 개요합니다.For an introduction to animation features, see the Animation Overview.

사용 하기 때문에 PathGeometry 경로 애니메이션을 정의 하는 개체에 잘 알고 있어야도 PathGeometry 및 다양 한 유형의 PathSegment 개체입니다.Because you use a PathGeometry object to define a path animation, you should also be familiar with PathGeometry and the different types of PathSegment objects. 자세한 내용은 참조는 기 하 도형 개요합니다.For more information, see the Geometry Overview.

경로 애니메이션이란?What Is a Path Animation?

경로 애니메이션의 형식인 AnimationTimeline 를 사용 하는 PathGeometry 입력으로 합니다.A path animation is a type of AnimationTimeline that uses a PathGeometry as its input. From, To, 설정 하는 대신 또는 속성에 의해 (From/하/By의 경우와 마찬가지로 애니메이션) 사용 하 여 키 프레임 (키 프레임 애니메이션에 대 한 사용) 또는, 기하학적 경로 정의 하 고 설정 하는 데 사용할는 PathGeometry 경로 애니메이션의 속성입니다.Instead of setting a From, To, or By property (as you do for a From/To/By animation) or using key frames (as you use for a key-frame animation), you define a geometric path and use it to set the PathGeometry property of the path animation. 경로 애니메이션은 진행되면서 경로에서 x, y 및 각도 정보를 읽고 해당 정보로 출력을 생성합니다.As the path animation progresses, it reads the x, y, and angle information from the path and uses that information to generate its output.

경로 애니메이션은 복잡한 경로를 따라 개체에 애니메이션 효과를 주는 데 매우 유용합니다.Path animations are very useful for animating an object along a complex path. 경로 따라 개체를 사용 하는 것을 이동 하는 한 가지 방법은 MatrixTransformMatrixAnimationUsingPath 복잡 한 경로 따라 개체를 변환 합니다.One way to move an object along a path is to use a MatrixTransform and a MatrixAnimationUsingPath to transform an object along a complex path. 다음 예제를 사용 하 여이 기술을 보여 줍니다.는 MatrixAnimationUsingPath 애니메이션 효과를 줄 개체는 Matrix 속성은 MatrixTransform합니다.The following example demonstrates this technique by using the MatrixAnimationUsingPath object to animate the Matrix property of a MatrixTransform. MatrixTransform 곡선된 경로 따라 이동으로 인해 및 단추에 적용 됩니다.The MatrixTransform is applied to a button and causes it to move along a curved path. 때문에 DoesRotateWithTangent 속성이 true, 사각형 경로의 탄젠트를 따라 회전 합니다.Because the DoesRotateWithTangent property is set to true, the rectangle rotates along the tangent of the path.

<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
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

사용 되는 경로 구문에 대 한 자세한 내용은 XAMLXAML 예제에서는 참조는 경로 태그 구문 개요입니다.For more information about the path syntax that is used in the XAMLXAML example, see the Path Markup Syntax overview. 전체 샘플을 참조 하십시오. 경로 애니메이션 샘플합니다.For the complete sample, see Path Animation Sample.

사용 하 여 속성 경로 애니메이션을 적용할 수 있습니다는 StoryboardXAMLXAML 및 코드, 또는 사용 하 여는 BeginAnimation 코드에서 메서드.You can apply a path animation to a property by using a Storyboard in XAMLXAML and code, or by using the BeginAnimation method in code. 만들려는 경로 애니메이션을 사용할 수도 있습니다는 AnimationClock 하나 이상의 속성에 적용 합니다.You can also use a path animation to create an AnimationClock and apply it to one or more properties. 애니메이션을 적용 하기 위한 여러 가지 방법에 대 한 자세한 내용은 참조 속성 애니메이션 기술 개요합니다.For more information about the different methods for applying animations, see Property Animation Techniques Overview.

경로 애니메이션 형식Path Animation Types

애니메이션은 속성 값을 생성하므로 속성 형식이 다르면 애니메이션 형식도 다릅니다.Because animations generate property values, there are different animation types for different property types. 사용 하는 속성에 애니메이션 효과를 줄는 Double (같은 X 속성의는 TranslateTransform), 생성 하는 애니메이션을 사용 하 여 Double 값.To animate a property that takes a Double (such as the X property of a TranslateTransform), you use an animation that produces Double values. 사용 하는 속성에 애니메이션 효과를 주는 Point를 생성 하는 애니메이션을 사용 하 여 Point 값, 및 기타 등등.To animate a property that takes a Point, you use an animation that produces Point values, and so on.

애니메이션 클래스 경로에 속한는 System.Windows.Media.Animation 네임 스페이스는 다음 명명 규칙을 사용 하 여:Path animation classes belong to the System.Windows.Media.Animation namespace and use the following naming convention:

<Type> AnimationUsingPath<Type> AnimationUsingPath

여기서 <Type>은 클래스가 애니메이션을 적용하는 값의 형식입니다.Where <Type> is the type of value that the class animates.

WPFWPF에서는 다음 경로 애니메이션 클래스를 제공합니다. provides the following path animation classes.

속성 형식Property type 해당 경로 애니메이션 클래스Corresponding path animation class Example
Double DoubleAnimationUsingPath 경로를 따라 개체에 애니메이션 효과 주기(Double 애니메이션)Animate an Object Along a Path (Double Animation)
Matrix MatrixAnimationUsingPath 경로를 따라 개체에 애니메이션 효과 주기(Matrix 애니메이션)Animate an Object Along a Path (Matrix Animation)
Point PointAnimationUsingPath 경로를 따라 개체에 애니메이션 효과 주기(포인트 애니메이션)Animate an Object Along a Path (Point Animation)

A MatrixAnimationUsingPath 생성 Matrix 에서 값을 해당 PathGeometry합니다.A MatrixAnimationUsingPath generates Matrix values from its PathGeometry. 와 함께 사용할 경우 한 MatrixTransform, MatrixAnimationUsingPath 경로 따라 개체를 이동할 수 있습니다.When used with a MatrixTransform, a MatrixAnimationUsingPath can move an object along a path. 설정 하는 경우는 DoesRotateWithTangent 의 속성은 MatrixAnimationUsingPathtrue, 경로 곡선에 따라 개체 회전 합니다.If you set the DoesRotateWithTangent property of the MatrixAnimationUsingPath to true, it also rotates the object along the curves of the path.

A PointAnimationUsingPath 생성 Point 값에서 x 및 y-좌표의 해당 PathGeometry합니다.A PointAnimationUsingPath generates Point values from the x- and y-coordinates of its PathGeometry. 사용 하 여 한 PointAnimationUsingPath 사용 하는 속성에 애니메이션 효과를 주는 Point 값, 경로 따라 개체를 이동할 수 있습니다.By using a PointAnimationUsingPath to animate a property that takes Point values, you can move an object along a path. A PointAnimationUsingPath 개체 회전할 수 없습니다.A PointAnimationUsingPath cannot rotate objects.

A DoubleAnimationUsingPath 생성 Double 에서 값을 해당 PathGeometry합니다.A DoubleAnimationUsingPath generates Double values from its PathGeometry. 설정 하 여는 Source 속성을 지정할 수 있습니다 여부는 DoubleAnimationUsingPath 출력으로 x-좌표, y-좌표 또는 경로의 각도 사용 합니다.By setting the Source property, you can specify whether the DoubleAnimationUsingPath uses the x-coordinate, y-coordinate, or angle of the path as its output. 사용할 수는 DoubleAnimationUsingPath 개체 회전 하거나 x 축 또는 y 축을 따라 이동 합니다.You can use a DoubleAnimationUsingPath to rotate an object or move it along the x-axis or y-axis.

경로 애니메이션 입력Path Animation Input

각 경로 애니메이션 클래스를 제공는 PathGeometry 속성에는 입력을 지정 합니다.Each path animation class provides a PathGeometry property for specifying its input. 경로 애니메이션이 사용 하 여는 PathGeometry 해당 출력 값을 생성 합니다.The path animation uses the PathGeometry to generate its output values. PathGeometry 클래스를 사용 하면 여러 복잡 한 그림 원호, 곡선 및 선 대 한 구성에 대해 설명 합니다.The PathGeometry class lets you describe multiple complex figures that are composed of arcs, curves, and lines.

핵심에는 PathGeometry 의 컬렉션인 PathFigure 이러한 개체는 개체가 각 그림에서 개별 도형을 설명 하기 때문에 그렇게 명명 된는 PathGeometry합니다.At the heart of a PathGeometry is a collection of PathFigure objects; these objects are so named because each figure describes a discrete shape in the PathGeometry. PathFigure 하나 이상의 구성 PathSegment 그림의 세그먼트를 설명 하는 각 개체입니다.Each PathFigure consists of one or more PathSegment objects, each of which describes a segment of the figure.

세그먼트 형식은 다양합니다.There are many types of segments.

세그먼트 형식Segment Type 설명Description
ArcSegment 두 점 사이에 타원형 호를 만듭니다.Creates an elliptical arc between two points.
BezierSegment 두 점 사이에 입방형 3차원 곡선을 만듭니다.Creates a cubic Bezier curve between two points.
LineSegment 두 점 사이에 선을 만듭니다.Creates a line between two points.
PolyBezierSegment 일련의 입방형 3차원 곡선을 만듭니다.Creates a series of cubic Bezier curves.
PolyLineSegment 일련의 줄을 만듭니다.Creates a series of lines.
PolyQuadraticBezierSegment 일련의 정방형 3차원 곡선을 만듭니다.Creates a series of quadratic Bezier curves.
QuadraticBezierSegment 정방형 3차원 곡선을 만듭니다.Creates a quadratic Bezier curve.

세그먼트에는 PathFigure 단일 기하학 다각형 셰이프를 다음 세그먼트의 시작 점으로 한 세그먼트의 끝점을 사용 하 여 결합 됩니다.The segments in a PathFigure are combined into a single geometric shape, which uses the end point of a segment as the start point of the next segment. StartPoint 속성은 PathFigure 첫 번째 세그먼트를 그리기 시간을 지정 합니다.The StartPoint property of a PathFigure specifies the point from which the first segment is drawn. 각 후속 세그먼트는 이전 세그먼트의 끝점에서 시작합니다.Each subsequent segment starts at the end point of the previous segment. 예를 들어 세로 선이 10,5010,150 설정 하 여 정의할 수 있습니다는 StartPoint 속성을 10,50 및 만들기는 LineSegmentPoint 의 속성 설정 10,150합니다.For example, a vertical line from 10,50 to 10,150 can be defined by setting the StartPoint property to 10,50 and creating a LineSegment with a Point property setting of 10,150.

에 대 한 자세한 내용은 PathGeometry 개체 참조는 기 하 도형 개요합니다.For more information about PathGeometry objects, see the Geometry Overview.

XAMLXAML를 설정 하려면 특별 한 약식된 구문을 사용할 수도 있습니다는 Figures 속성은 PathGeometry합니다.In XAMLXAML, you can also use a special abbreviated syntax to set the Figures property of a PathGeometry. 자세한 내용은 참조 경로 태그 구문 개요입니다.For more information, see Path Markup Syntax overview.

사용 되는 경로 구문에 대 한 자세한 내용은 XAMLXAML 예제에서는 참조는 경로 태그 구문 개요입니다.For more information about the path syntax that is used in the XAMLXAML example, see the Path Markup Syntax overview.

참고 항목See Also

경로 애니메이션 샘플Path Animation Sample
경로 태그 구문Path Markup Syntax
경로 애니메이션 방법 항목Path Animation How-to Topics
애니메이션 개요Animation Overview
속성 애니메이션 기술 개요Property Animation Techniques Overview