Procedura: animare un punto utilizzando fotogrammi chiave
In questo esempio viene illustrato come usare la PointAnimationUsingKeyFrames classe per animare un oggetto Point.
Esempio
L'esempio seguente sposta un'ellisse lungo un tracciato triangolare. Nell'esempio viene utilizzata la PointAnimationUsingKeyFrames classe per animare la Center proprietà di un oggetto EllipseGeometry. Questa animazione usa tre fotogrammi chiave nel modo seguente:
Durante la prima metà del secondo, usa un'istanza della LinearPointKeyFrame classe per spostare l'ellisse lungo un percorso a una velocità costante dalla posizione iniziale. Fotogrammi chiave lineari come LinearPointKeyFrame la creazione di un'interpolazione lineare uniforme tra i valori.
Durante la fine della seconda metà successiva, usa un'istanza della DiscretePointKeyFrame classe per spostare improvvisamente l'ellisse lungo il percorso verso la posizione successiva. Fotogrammi chiave discreti come DiscretePointKeyFrame creare salti improvvisi tra valori.
Durante i due secondi finali, usa un'istanza della SplinePointKeyFrame classe per spostare i puntini di sospensione nella posizione iniziale. Fotogrammi chiave spline come SplinePointKeyFrame creare una transizione di variabile tra valori in base ai valori della KeySpline proprietà. In questo esempio, l'animazione inizia a spostarsi lentamente, quindi accelera in modo esponenziale verso la fine del segmento temporale.
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>
Per l'esempio completo, vedere Esempio di animazione con fotogrammi chiave.
Per coerenza con altri esempi di animazione, le versioni di codice di questo esempio usano un Storyboard oggetto per applicare .PointAnimationUsingKeyFrames Tuttavia, quando si applica una singola animazione nel codice, è più semplice usare il BeginAnimation metodo anziché usare un oggetto Storyboard. Per un esempio, vedere Animare una proprietà senza utilizzare uno storyboard.
Vedi anche
.NET Desktop feedback
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per