Compartilhar via


Como: Animar a Posição de um Objeto Usando PointAnimation

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

Exemplo

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.


Imports Microsoft.VisualBasic
Imports System
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
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;
        }

    }
}
<!-- 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. -->
<Page  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas>
      <Path Fill="Blue" Margin="15,15,15,15">
        <Path.Data>

          <!-- Describes an ellipse. -->
          <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
            Center="200,100" RadiusX="15" RadiusY="15" />
        </Path.Data>
        <Path.Triggers>
          <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard Name="MyBeginStoryboard">
              <Storyboard>

                <!-- Animate the Center property so that the ellipse animates from 
                one point on the screen to another. -->
                <PointAnimation
                Storyboard.TargetProperty="Center"
                Storyboard.TargetName="MyAnimatedEllipseGeometry"
                Duration="0:0:2" From="200,100" To="450,250" RepeatBehavior="Forever" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>
</Page>

Consulte também

Referência

PointAnimation

Path

EllipseGeometry

Center

Conceitos

Revisão de Animação

Graphics and Multimedia

Outros recursos

Tópicos "Como fazer" sobre Elementos gráficos

Animação e Temporização

Tópicos de "Como Fazer" de animação e tempo