Como: Animar um objeto ao longo de uma trajetória (animação de pontos)
This example shows how to use a PointAnimationUsingPath object to animate a Point along a curved path.
Exemplo
The following example moves an EllipseGeometry along a path defined by a PathGeometry. The ellipse geometry's Center property, which takes a Point value, specifies its position; to move the ellipse geometry, you animate its Center property. The example uses a PointAnimationUsingPath to animate the EllipseGeometry object's Center property.
<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">
<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>
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
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
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);
};
}
}
}
Para obter o exemplo completo, consulte Amostra de animação do caminho.
The code version of the preceding sample used a Storyboard to animate the EllipseGeometry, even though only one animation was applied. A Storyboard is often the easiest way to apply multiple animations because these animations can be controlled by the same Storyboard. However, an easier way to apply a single animation to a property when using code is to use the BeginAnimation method. For an example, see Como: Animar uma Propriedade Sem Usar um Storyboard.