Comment : animer un objet sur un tracé (animation double)
Mise à jour : novembre 2007
Cet exemple montre comment utiliser la classe DoubleAnimationUsingPath pour déplacer un objet sur un tracé défini par un PathGeometry.
Exemple
L'exemple suivant utilise deux objets DoubleAnimationUsingPath pour déplacer un rectangle sur un tracé géométrique :
Le premier DoubleAnimationUsingPath anime le X du TranslateTransform appliqué au rectangle. Ainsi, le rectangle se déplace horizontalement sur le tracé.
Le deuxième DoubleAnimationUsingPath anime le Y du TranslateTransform appliqué au rectangle. Ainsi, le rectangle se déplace verticalement sur le tracé.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions">
<Page.Resources>
<!-- This is the geometry creates the animation path. Because
this example uses it multiple times, it's declared as a resource and
frozen to improve performance. -->
<PathGeometry x:Key="AnimationPath"
Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
PresentationOptions:Freeze="True" />
</Page.Resources>
<Canvas Width="400" Height="400">
<!-- The object to animate. -->
<Rectangle
Width="30" Height="30" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="AnimatedTranslateTransform" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<!-- Animates the rectangle horizotally along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource AnimationPath}"
Source="X"
Duration="0:0:5" />
<!-- Animates the rectangle vertically along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource AnimationPath}"
Source="Y"
Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</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 DoubleAnimationUsingPathExample : Page
{
public DoubleAnimationUsingPathExample()
{
// Create a NameScope for the page so that
// we can use Storyboards.
NameScope.SetNameScope(this, new NameScope());
// Create a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Width = 30;
aRectangle.Height = 30;
aRectangle.Fill = Brushes.Blue;
// Create a transform. This transform
// will be used to move the rectangle.
TranslateTransform animatedTranslateTransform =
new TranslateTransform();
// Register the transform's name with the page
// so that they it be targeted by a Storyboard.
this.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform);
aRectangle.RenderTransform = animatedTranslateTransform;
// Create a Canvas to contain the rectangle
// and add it to the page.
Canvas mainPanel = new Canvas();
mainPanel.Width = 400;
mainPanel.Height = 400;
mainPanel.Children.Add(aRectangle);
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 DoubleAnimationUsingPath to move the
// rectangle horizontally along the path by animating
// its TranslateTransform.
DoubleAnimationUsingPath translateXAnimation =
new DoubleAnimationUsingPath();
translateXAnimation.PathGeometry = animationPath;
translateXAnimation.Duration = TimeSpan.FromSeconds(5);
// Set the Source property to X. This makes
// the animation generate horizontal offset values from
// the path information.
translateXAnimation.Source = PathAnimationSource.X;
// Set the animation to target the X property
// of the TranslateTransform named "AnimatedTranslateTransform".
Storyboard.SetTargetName(translateXAnimation, "AnimatedTranslateTransform");
Storyboard.SetTargetProperty(translateXAnimation,
new PropertyPath(TranslateTransform.XProperty));
// Create a DoubleAnimationUsingPath to move the
// rectangle vertically along the path by animating
// its TranslateTransform.
DoubleAnimationUsingPath translateYAnimation =
new DoubleAnimationUsingPath();
translateYAnimation.PathGeometry = animationPath;
translateYAnimation.Duration = TimeSpan.FromSeconds(5);
// Set the Source property to Y. This makes
// the animation generate vertical offset values from
// the path information.
translateYAnimation.Source = PathAnimationSource.Y;
// Set the animation to target the Y property
// of the TranslateTransform named "AnimatedTranslateTransform".
Storyboard.SetTargetName(translateYAnimation, "AnimatedTranslateTransform");
Storyboard.SetTargetProperty(translateYAnimation,
new PropertyPath(TranslateTransform.YProperty));
// Create a Storyboard to contain and apply the animations.
Storyboard pathAnimationStoryboard = new Storyboard();
pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever;
pathAnimationStoryboard.Children.Add(translateXAnimation);
pathAnimationStoryboard.Children.Add(translateYAnimation);
// Start the animations when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
// Start the storyboard.
pathAnimationStoryboard.Begin(this);
};
}
}
}
Pour l'exemple complet, consultez Animation de tracés, exemple.
Une autre façon de déplacer un objet à l'aide d'un tracé géométrique est d'utiliser un objet MatrixAnimationUsingPath. Pour obtenir un exemple, consultez Comment : animer un objet sur un tracé (animation de matrice).