Cómo: Animar un EllipseGeometry
En este ejemplo se muestra cómo animar un Geometry dentro de un Path. En el ejemplo siguiente se usa PointAnimation para animar la propiedad Center de EllipseGeometry.
Ejemplo
<!-- EllipseGeometryExample.xaml
This example shows how to animate an EllipseGeometry. -->
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="EllipseGeometry Animation Example">
<Canvas Height="400" Width="400" Margin="20">
<Path Name="myPathShape"
Fill="Blue" Stroke="Black" StrokeThickness="5">
<Path.Data>
<EllipseGeometry x:Name="MyEllipseGeometry"
Center="200,200" RadiusX="25" RadiusY="50" />
</Path.Data>
<Path.Triggers>
<!-- Animates the Center position of the
EllipseGeometry. -->
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<PointAnimation
Storyboard.TargetName="MyEllipseGeometry"
Storyboard.TargetProperty="Center"
From="200,200" To="50,50" Duration="0:0:5"
AutoReverse="true" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>
// EllipseGeometryExample.cs
//
// This sample demonstrates how to animate the center
// position of an EllipseGeometry using a PointAnimation.
using System;
using System.Windows;
using System.Windows.Navigation;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls;
namespace Microsoft.Samples.Animation.AnimatePathShapeSample
{
public class EllipseGeometryExample : Page {
public EllipseGeometryExample()
{
NameScope.SetNameScope(this, new NameScope());
WindowTitle = "EllipseGeometry Animation Example";
Canvas myCanvas = new Canvas();
myCanvas.Width = 400;
myCanvas.Height = 400;
myCanvas.Margin = new Thickness(20);
// Create a Path object to contain the geometry.
System.Windows.Shapes.Path myPath =
new System.Windows.Shapes.Path();
myPath.Fill = System.Windows.Media.Brushes.Blue;
myPath.Stroke = System.Windows.Media.Brushes.Black;
myPath.StrokeThickness = 5;
// Create an EllipseGeometry.
System.Windows.Media.EllipseGeometry myEllipseGeometry =
new System.Windows.Media.EllipseGeometry();
myEllipseGeometry.Center = new System.Windows.Point(200, 200);
myEllipseGeometry.RadiusX = 25;
myEllipseGeometry.RadiusY = 50;
// Register a name for the geometry so that it can
// be targeted by animations.
this.RegisterName("MyEllipseGeometry", myEllipseGeometry);
// Add the geometry to the Path.
myPath.Data = myEllipseGeometry;
myCanvas.Children.Add(myPath);
this.Content = myCanvas;
// Create a PointAnimation to animate the center of the ellipse.
PointAnimation myPointAnimation = new PointAnimation();
myPointAnimation.From = new System.Windows.Point(200, 200);
myPointAnimation.To = new System.Windows.Point(50, 50);
myPointAnimation.Duration =
new Duration(TimeSpan.FromMilliseconds(5000));
myPointAnimation.AutoReverse = true;
myPointAnimation.RepeatBehavior = RepeatBehavior.Forever;
Storyboard.SetTargetName(myPointAnimation, "MyEllipseGeometry");
Storyboard.SetTargetProperty(myPointAnimation,
new PropertyPath(EllipseGeometry.CenterProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myPointAnimation);
// Use an anonymous event handler to begin the animation
// when the path is loaded.
myPath.Loaded += delegate(object sender, RoutedEventArgs args)
{
myStoryboard.Begin(myPath);
};
}
}
}
' EllipseGeometryExample.cs
'
' This sample demonstrates how to animate the center
' position of an EllipseGeometry using a PointAnimation.
Imports System
Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls
Namespace Microsoft.Samples.Animation.AnimatePathShapeSample
' Create the demonstration.
Public Class PathElementAnimationExample
Inherits Page
Private Dim WithEvents myPath As Path
Private Dim myStoryboard As Storyboard
Public Sub New()
NameScope.SetNameScope(Me, new NameScope())
Me.WindowTitle = "EllipseGeometry Animation Example"
Dim myCanvas As New Canvas()
myCanvas.Width = 400
myCanvas.Height = 400
myCanvas.Margin = New Thickness(20)
' Create a Path object to contain the geometry.
myPath = New Path()
myPath.Fill = Brushes.Blue
myPath.Stroke = Brushes.Black
myPath.StrokeThickness = 5
' Create an EllipseGeometry.
Dim myEllipseGeometry As New EllipseGeometry()
myEllipseGeometry.Center = New System.Windows.Point(200, 200)
myEllipseGeometry.RadiusX = 25
myEllipseGeometry.RadiusY = 50
' Register a name for the geometry so that it can
' be targeted by animations.
Me.RegisterName("MyEllipseGeometry", myEllipseGeometry)
' Add the geometry to the Path.
myPath.Data = myEllipseGeometry
myCanvas.Children.Add(myPath)
Me.Content = myCanvas
' Create a PointAnimation to animate the center of the Ellipse.
Dim myPointAnimation As New PointAnimation()
myPointAnimation.From = New System.Windows.Point(200, 200)
myPointAnimation.To = New System.Windows.Point(50, 50)
myPointAnimation.Duration = _
New Duration(TimeSpan.FromMilliseconds(5000))
myPointAnimation.AutoReverse = True
myPointAnimation.RepeatBehavior = RepeatBehavior.Forever
Storyboard.SetTargetName(myPointAnimation, "MyEllipseGeometry")
Storyboard.SetTargetProperty(myPointAnimation, _
new PropertyPath(EllipseGeometry.CenterProperty))
myStoryboard = New Storyboard()
myStoryboard.Children.Add(myPointAnimation)
End Sub
' Start the animation when the path is loaded.
Private Sub myPath_Loaded(ByVal sender as object, ByVal args as RoutedEventArgs) Handles myPath.Loaded
myStoryboard.Begin(myPath)
End Sub
End Class
End Namespace