Cómo: Animar un punto mediante fotogramas clave
En este ejemplo se muestra cómo utilizar la clase PointAnimationUsingKeyFrames para animar una estructura Point.
Ejemplo
En el ejemplo siguiente se mueve una elipse a lo largo de una trayectoria triangular. El ejemplo utiliza la clase PointAnimationUsingKeyFrames para animar la propiedad Center de un objeto 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 una trayectoria a una velocidad constante desde su posición inicial. Los cuadros clave lineales como LinearPointKeyFrame crean una interpolación lineal suavizada entre los valores.
Durante el medio segundo siguiente, utiliza una instancia de la clase DiscretePointKeyFrame para mover repentinamente la elipse a lo largo de la trayectoria a la posición siguiente. Los fotogramas clave discretos como DiscretePointKeyFrame crean saltos súbitos entre los valores.
En los dos segundos finales, se utiliza una instancia de la clase SplinePointKeyFrame para devolver la elipse a su posición inicial. Los fotogramas clave spline como SplinePointKeyFrame crean una transición variable entre los 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 de tiempo.
Imports System
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
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;
}
}
}
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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 obtener el ejemplo completo, vea KeyFrame Animation Sample.
Para ofrecer coherencia con otros ejemplos de animación, en las versiones de código de este ejemplo se usa un objeto Storyboard para aplicar PointAnimationUsingKeyFrames. Sin embargo, al aplicar una animación única en código, es más fácil para utilizar el método BeginAnimation en lugar de utilizar un objeto Storyboard. Para obtener un ejemplo, vea Cómo: Animar una propiedad sin utilizar un guión gráfico.
Vea también
Referencia
Conceptos
Información general sobre animaciones de fotogramas clave