Edit

How to: Animate the Position of an Object by Using PointAnimation

  • Article

This example shows how to use the PointAnimation class to animate an object along a Path.

Example

The following example moves an ellipse along a Path from one point on the screen to another. The example animates the position of an EllipseGeometry by using PointAnimation to animate the Center property.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;

namespace SDKSamples
{
    // This example shows how to use PointAnimation to animate the
    // position of an ellipse by animating the Center property of an
    // EllipseGeometry. PointAnimation is used because the Center property
    // takes a Point value.
    public class PointAnimationExample : Page
    {
        public PointAnimationExample()
        {

            // Create a NameScope for this page so that
            // Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            EllipseGeometry myEllipseGeometry = new EllipseGeometry();
            myEllipseGeometry.Center = new Point(200, 100);
            myEllipseGeometry.RadiusX = 15;
            myEllipseGeometry.RadiusY = 15;

            // Assign the EllipseGeometry a name so that
            // it can be targeted by a Storyboard.
            this.RegisterName(
                "MyAnimatedEllipseGeometry", myEllipseGeometry);

            Path myPath = new Path();
            myPath.Fill = Brushes.Blue;
            myPath.Margin = new Thickness(15);
            myPath.Data = myEllipseGeometry;

            PointAnimation myPointAnimation = new PointAnimation();
            myPointAnimation.Duration = TimeSpan.FromSeconds(2);

            // Set the animation to repeat forever.
            myPointAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the From and To properties of the animation.
            myPointAnimation.From = new Point(200, 100);
            myPointAnimation.To = new Point(450, 250);

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

            // Create a storyboard to apply the animation.
            Storyboard ellipseStoryboard = new Storyboard();
            ellipseStoryboard.Children.Add(myPointAnimation);

            // Start the storyboard when the Path loads.
            myPath.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                ellipseStoryboard.Begin(this);
            };

            Canvas containerCanvas = new Canvas();
            containerCanvas.Children.Add(myPath);

            Content = containerCanvas;
        }
    }
}


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media

Namespace SDKSamples
    ' This example shows how to use PointAnimation to animate the
    ' position of an ellipse by animating the Center property of an 
    ' EllipseGeometry. PointAnimation is used because the Center property
    ' takes a Point value.
    Public Class PointAnimationExample
        Inherits Page
        Public Sub New()

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myEllipseGeometry As New EllipseGeometry()
            With myEllipseGeometry
                .Center = New Point(200, 100)
                .RadiusX = 15
                .RadiusY = 15
            End With

            ' Assign the EllipseGeometry a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("MyAnimatedEllipseGeometry", myEllipseGeometry)

            Dim myPath As New Path()
            With myPath
                .Fill = Brushes.Blue
                .Margin = New Thickness(15)
                .Data = myEllipseGeometry
            End With

            Dim myPointAnimation As New PointAnimation()
            With myPointAnimation
                .Duration = TimeSpan.FromSeconds(2)

                ' Set the animation to repeat forever. 
                .RepeatBehavior = RepeatBehavior.Forever

                ' Set the From and To properties of the animation.
                .From = New Point(200, 100)
                .To = New Point(450, 250)
            End With

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

            ' Create a storyboard to apply the animation.
            Dim ellipseStoryboard As New Storyboard()
            ellipseStoryboard.Children.Add(myPointAnimation)

            ' Start the storyboard when the Path loads.
            AddHandler myPath.Loaded, Sub(sender As Object, e As RoutedEventArgs) ellipseStoryboard.Begin(Me)

            Dim containerCanvas As New Canvas()
            containerCanvas.Children.Add(myPath)

            Content = containerCanvas
        End Sub

    End Class
End Namespace

See also