방법: 경로를 따라 개체에 애니메이션 효과 주기(포인트 애니메이션)

  • 아티클

이 예제에서는 PointAnimationUsingPath 개체를 사용하여 곡선 경로를 따라 Point에 애니메이션 효과를 주는 방법을 보여 줍니다.

예제

다음 예제에서는 PathGeometry에서 정의된 경로를 따라 EllipseGeometry를 이동합니다. Point 값을 사용하는 타원 기하 도형의 Center 속성은 해당 위치를 지정합니다. 타원 기하 도형을 이동하려면 해당 Center 속성에 애니메이션 효과를 줍니다. 이 예제에서는 PointAnimationUsingPath를 사용하여 EllipseGeometry 개체의 Center 속성에 애니메이션 효과를 줍니다.

<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">
  <Canvas Width="400" Height="400">
      
    <Path Fill="Blue" Margin="15,15,15,15">
      <Path.Data>

        <!-- The EllipseGemetry specifies the shape and position of the Ellipse. The
        Center property is animated, causing the Ellipse to animate across the screen-->
        <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
          Center="10,100" RadiusX="15" RadiusY="15" />
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard Name="MyBeginStoryboard">
            <Storyboard>
              
              <!-- Animates the ellipse along the path. -->
              <PointAnimationUsingPath
                Storyboard.TargetName="MyAnimatedEllipseGeometry"
                Storyboard.TargetProperty="Center"
                Duration="0:0:5" 
                RepeatBehavior="Forever" >
                <PointAnimationUsingPath.PathGeometry>
                  <PathGeometry 
                    Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
                    PresentationOptions:Freeze="True" />
                </PointAnimationUsingPath.PathGeometry>
              </PointAnimationUsingPath>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </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
{

    public class PointAnimationUsingPathExample : Page
    {

        public PointAnimationUsingPathExample()
        {

            // Create a NameScope for the page so that
            // we can use Storyboards.
            NameScope.SetNameScope(this, new NameScope());

            // Create the EllipseGeometry to animate.
            EllipseGeometry animatedEllipseGeometry =
                new EllipseGeometry(new Point(10, 100), 15, 15);

            // Register the EllipseGeometry's name with
            // the page so that it can be targeted by a
            // storyboard.
            this.RegisterName("AnimatedEllipseGeometry", animatedEllipseGeometry);

            // Create a Path element to display the geometry.
            Path ellipsePath = new Path();
            ellipsePath.Data = animatedEllipseGeometry;
            ellipsePath.Fill = Brushes.Blue;
            ellipsePath.Margin = new Thickness(15);

            // Create a Canvas to contain ellipsePath
            // and add it to the page.
            Canvas mainPanel = new Canvas();
            mainPanel.Width = 400;
            mainPanel.Height = 400;
            mainPanel.Children.Add(ellipsePath);
            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 PointAnimationgUsingPath to move
            // the EllipseGeometry along the animation path.
            PointAnimationUsingPath centerPointAnimation =
                new PointAnimationUsingPath();
            centerPointAnimation.PathGeometry = animationPath;
            centerPointAnimation.Duration = TimeSpan.FromSeconds(5);
            centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the animation to target the Center property
            // of the EllipseGeometry named "AnimatedEllipseGeometry".
            Storyboard.SetTargetName(centerPointAnimation, "AnimatedEllipseGeometry");
            Storyboard.SetTargetProperty(centerPointAnimation,
                new PropertyPath(EllipseGeometry.CenterProperty));

            // Create a Storyboard to contain and apply the animation.
            Storyboard pathAnimationStoryboard = new Storyboard();
            pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever;
            pathAnimationStoryboard.AutoReverse = true;
            pathAnimationStoryboard.Children.Add(centerPointAnimation);

            // Start the Storyboard when ellipsePath is loaded.
            ellipsePath.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


    Public Class PointAnimationUsingPathExample
        Inherits Page

        Public Sub New()

            ' Create a NameScope for the page so that
            ' we can use Storyboards.
            NameScope.SetNameScope(Me, New NameScope())

            ' Create the EllipseGeometry to animate.
            Dim animatedEllipseGeometry As New EllipseGeometry(New Point(10, 100), 15, 15)

            ' Register the EllipseGeometry's name with
            ' the page so that it can be targeted by a
            ' storyboard.
            Me.RegisterName("AnimatedEllipseGeometry", animatedEllipseGeometry)

            ' Create a Path element to display the geometry.
            Dim ellipsePath As New Path()
            ellipsePath.Data = animatedEllipseGeometry
            ellipsePath.Fill = Brushes.Blue
            ellipsePath.Margin = New Thickness(15)

            ' Create a Canvas to contain ellipsePath
            ' and add it to the page.
            Dim mainPanel As New Canvas()
            mainPanel.Width = 400
            mainPanel.Height = 400
            mainPanel.Children.Add(ellipsePath)
            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 PointAnimationgUsingPath to move
            ' the EllipseGeometry along the animation path.
            Dim centerPointAnimation As New PointAnimationUsingPath()
            centerPointAnimation.PathGeometry = animationPath
            centerPointAnimation.Duration = TimeSpan.FromSeconds(5)
            centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Set the animation to target the Center property
            ' of the EllipseGeometry named "AnimatedEllipseGeometry".
            Storyboard.SetTargetName(centerPointAnimation, "AnimatedEllipseGeometry")
            Storyboard.SetTargetProperty(centerPointAnimation, New PropertyPath(EllipseGeometry.CenterProperty))

            ' Create a Storyboard to contain and apply the animation.
            Dim pathAnimationStoryboard As New Storyboard()
            pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever
            pathAnimationStoryboard.AutoReverse = True
            pathAnimationStoryboard.Children.Add(centerPointAnimation)

            ' Start the Storyboard when ellipsePath is loaded.
            AddHandler ellipsePath.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)
        End Sub

    End Class

End Namespace

전체 샘플을 보려면 경로 애니메이션 샘플을 참조하세요.

이전 샘플의 코드 버전에서는 애니메이션이 하나만 적용되었지만 EllipseGeometry에 애니메이션 효과를 주기 위해 Storyboard를 사용했습니다. 이러한 애니메이션은 동일한 Storyboard에서 제어될 수 있으므로 Storyboard는 종종 여러 애니메이션을 적용하는 가장 쉬운 방법입니다. 그러나 코드를 사용할 때 속성에 단일 애니메이션을 적용하는 가장 쉬운 방법은 BeginAnimation 메서드를 사용하는 것입니다. 예제를 보려면 Storyboard를 사용하지 않고 속성에 애니메이션 효과 주기를 참조하세요.

참고 항목