Cómo: Animar un punto mediante fotogramas clave
En este ejemplo se muestra cómo utilizar la clase PointAnimationUsingKeyFrames para animar un elemento Point.
Ejemplo
En el ejemplo siguiente se mueve una elipse a lo largo de un trazado triangular. En el ejemplo siguiente se usa la clase PointAnimationUsingKeyFrames para animar la propiedad Center de un EllipseGeometry. Esta animación utiliza tres fotogramas clave de la siguiente manera:
Durante el primer medio segundo, utiliza una instancia de la clase LinearPointKeyFrame para mover la elipse a lo largo de un trazado a ritmo constante desde su posición inicial. Los fotogramas clave lineales como LinearPointKeyFrame crean una interpolación lineal suave entre valores.
Durante el final del medio segundo siguiente, utiliza una instancia de la clase DiscretePointKeyFrame para mover repentinamente la elipse a lo largo del trazado a la posición siguiente. Los fotogramas clave discretos como DiscretePointKeyFrame crean saltos repentinos entre valores.
Durante los últimos dos segundos, utiliza una instancia de la clase SplinePointKeyFrame para mover la elipse de nuevo a su posición inicial. Los fotogramas clave de spline como SplinePointKeyFrame crean una transición variable entre valores según los valores de la propiedad KeySpline. En este ejemplo, la animación comienza despacio y se acelera exponencialmente hacia el final del segmento temporal.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace Microsoft.Samples.KeyFrameExamples
{
/// <summary>
/// This example shows how to use the PointAnimationUsingKeyFrames class
/// to animate the position of an object.
/// </summary>
public class PointAnimationUsingKeyFramesExample : Page
{
public PointAnimationUsingKeyFramesExample()
{
Title = "PointAnimationUsingKeyFrames Example";
Background = Brushes.White;
Margin = new Thickness(20);
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
// Create an EllipseGeometry.
EllipseGeometry myAnimatedEllipseGeometry =
new EllipseGeometry(new Point(200,100), 15, 15);
// Assign the EllipseGeometry a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"MyAnimatedEllipseGeometry", myAnimatedEllipseGeometry);
// Create a Path element to display the geometry.
Path aPath = new Path();
aPath.Fill = Brushes.Blue;
aPath.Data = myAnimatedEllipseGeometry;
// Create a Canvas to contain the path.
Canvas containerCanvas = new Canvas();
containerCanvas.Width = 500;
containerCanvas.Height = 400;
containerCanvas.Children.Add(aPath);
// Create a PointAnimationUsingKeyFrames to
// animate the EllipseGeometry.
PointAnimationUsingKeyFrames centerPointAnimation
= new PointAnimationUsingKeyFrames();
centerPointAnimation.Duration = TimeSpan.FromSeconds(5);
// Animate from the starting position to (100,300)
// over the first half-second using linear
// interpolation.
centerPointAnimation.KeyFrames.Add(
new LinearPointKeyFrame(
new Point(100, 300), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5))) // KeyTime
);
// Animate from (100,300) (the value of the previous key frame)
// to (400,300) at 1 second using discrete interpolation.
// Because the interpolation is discrete, the ellipse will appear
// to "jump" to (400,300) at 1 second.
centerPointAnimation.KeyFrames.Add(
new DiscretePointKeyFrame(
new Point(400, 300), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))) // KeyTime
);
// Animate from (400,300) (the value of the previous key frame) to (200,100)
// over two seconds, starting at 1 second (the key time of the
// last key frame) and ending at 3 seconds.
centerPointAnimation.KeyFrames.Add(
new SplinePointKeyFrame(
new Point(200, 100), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)), // KeyTime
new KeySpline(0.6, 0.0, 0.9, 0.0) // KeySpline
)
);
// Set the animation to repeat forever.
centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation to target the Center property
// of the object named "MyAnimatedEllipseGeometry".
Storyboard.SetTargetName(centerPointAnimation, "MyAnimatedEllipseGeometry");
Storyboard.SetTargetProperty(
centerPointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));
// Create a storyboard to apply the animation.
Storyboard ellipseStoryboard = new Storyboard();
ellipseStoryboard.Children.Add(centerPointAnimation);
// Start the storyboard when the Path loads.
aPath.Loaded += delegate(object sender, RoutedEventArgs e)
{
ellipseStoryboard.Begin(this);
};
Content = containerCanvas;
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media
Namespace Microsoft.Samples.KeyFrameExamples
''' <summary>
''' This example shows how to use the PointAnimationUsingKeyFrames class
''' to animate the position of an object.
''' </summary>
Public Class PointAnimationUsingKeyFramesExample
Inherits Page
Public Sub New()
Title = "PointAnimationUsingKeyFrames Example"
Background = Brushes.White
Margin = New Thickness(20)
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
' Create an EllipseGeometry.
Dim myAnimatedEllipseGeometry As New EllipseGeometry(New Point(200,100), 15, 15)
' Assign the EllipseGeometry a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("MyAnimatedEllipseGeometry", myAnimatedEllipseGeometry)
' Create a Path element to display the geometry.
Dim aPath As New Path()
aPath.Fill = Brushes.Blue
aPath.Data = myAnimatedEllipseGeometry
' Create a Canvas to contain the path.
Dim containerCanvas As New Canvas()
containerCanvas.Width = 500
containerCanvas.Height = 400
containerCanvas.Children.Add(aPath)
' Create a PointAnimationUsingKeyFrames to
' animate the EllipseGeometry.
Dim centerPointAnimation As New PointAnimationUsingKeyFrames()
centerPointAnimation.Duration = TimeSpan.FromSeconds(5)
' Animate from the starting position to (100,300)
' over the first half-second using linear
' interpolation.
centerPointAnimation.KeyFrames.Add(New LinearPointKeyFrame(New Point(100, 300), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5)))) ' KeyTime - Target value (KeyValue)
' Animate from (100,300) (the value of the previous key frame)
' to (400,300) at 1 second using discrete interpolation.
' Because the interpolation is discrete, the ellipse will appear
' to "jump" to (400,300) at 1 second.
centerPointAnimation.KeyFrames.Add(New DiscretePointKeyFrame(New Point(400, 300), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)))) ' KeyTime - Target value (KeyValue)
' Animate from (400,300) (the value of the previous key frame) to (200,100)
' over two seconds, starting at 1 second (the key time of the
' last key frame) and ending at 3 seconds.
centerPointAnimation.KeyFrames.Add(New SplinePointKeyFrame(New Point(200, 100), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)), New KeySpline(0.6, 0.0, 0.9, 0.0))) ' KeySpline - KeyTime - Target value (KeyValue)
' Set the animation to repeat forever.
centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever
' Set the animation to target the Center property
' of the object named "MyAnimatedEllipseGeometry".
Storyboard.SetTargetName(centerPointAnimation, "MyAnimatedEllipseGeometry")
Storyboard.SetTargetProperty(centerPointAnimation, New PropertyPath(EllipseGeometry.CenterProperty))
' Create a storyboard to apply the animation.
Dim ellipseStoryboard As New Storyboard()
ellipseStoryboard.Children.Add(centerPointAnimation)
' Start the storyboard when the Path loads.
AddHandler aPath.Loaded, Sub(sender As Object, e As RoutedEventArgs) ellipseStoryboard.Begin(Me)
Content = containerCanvas
End Sub
End Class
End Namespace
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="White" Margin="20">
<Canvas Width="400" Height="400">
<Path Fill="Blue">
<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>
<Storyboard>
<!-- Animating the Center property uses 3 KeyFrames, which animate
the ellipse allong a triangular path. -->
<PointAnimationUsingKeyFrames
Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:5" RepeatBehavior="Forever">
<!-- Over the first half second, Using a LinearPointKeyFrame, the ellipse
moves steadily from its starting position along the first line of the
trianglar path. -->
<LinearPointKeyFrame
KeyTime="0:0:0.5"
Value="100,300" />
<!-- Using a DiscretePointKeyFrame, the ellipse suddenly changes position
after the first second of the animation. -->
<DiscretePointKeyFrame
KeyTime="0:0:1"
Value="400,300" />
<!-- Using a SplinePointKeyFrame, the ellipse moves back to its starting
position. It moves slowly at first and then speeds up. This key frame
takes 2 seconds to complete. -->
<SplinePointKeyFrame
KeySpline="0.6,0.0 0.9,0.00"
KeyTime="0:0:3"
Value="200,100" />
</PointAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>
Para consultar el ejemplo completo, vea Ejemplo de animación mediante fotogramas clave.
Para ofrecer coherencia con otros ejemplos de animación, en las versiones de código de este ejemplo se utiliza un objeto Storyboard para aplicar PointAnimationUsingKeyFrames. Pero, al aplicar una sola animación en el código, es más fácil usar el método BeginAnimation en vez de un Storyboard. Para obtener un ejemplo, vea Animar una propiedad sin utilizar un guión gráfico.
Vea también
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
.NET Desktop feedback