Procedura: animare un oggetto lungo un percorso (animazione Point)
In questo esempio viene illustrato come usare un PointAnimationUsingPath oggetto per animare un Point oggetto lungo un percorso curvo.
Esempio
Nell'esempio seguente un oggetto viene spostato EllipseGeometry lungo un percorso definito da un oggetto PathGeometry. La proprietà della geometria con puntini di Center sospensione, che accetta un Point valore, ne specifica la posizione. Per spostare la geometria con i puntini di sospensione, animarne la Center proprietà. Nell'esempio viene utilizzato un PointAnimationUsingPath oggetto per animare la EllipseGeometry proprietà dell'oggetto Center .
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://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>
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);
};
}
}
}
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
Per l'esempio completo, vedere Path Animation Sample (Esempio di animazione tracciato).
La versione di codice dell'esempio precedente usava un Storyboard oggetto per animare , EllipseGeometryanche se è stata applicata una sola animazione. Un Storyboard è spesso il modo più semplice per applicare più animazioni perché queste animazioni possono essere controllate dallo stesso Storyboard. Tuttavia, un modo più semplice per applicare una singola animazione a una proprietà quando si usa il codice consiste nell'usare il BeginAnimation metodo . Per un esempio, vedere Animare una proprietà senza utilizzare uno storyboard.
Vedi anche
.NET Desktop feedback
Commenti e suggerimenti
https://aka.ms/ContentUserFeedback.
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, vedereInvia e visualizza il feedback per