Comment : animer des modifications de taille à l'aide d'images clés
Cet exemple indique comment animer des modifications de taille à l'aide d'images clés.
Exemple
L'exemple suivant utilise la classe SizeAnimationUsingKeyFrames pour animer la propriété Size d'un ArcSegment. Cette animation utilise trois images clés de la manière suivante :
Pendant la première demi-seconde de l'animation, utilise une instance de la classe LinearSizeKeyFrame pour augmenter progressivement la taille de l'arc. Les images clés linéaires telles que LinearSizeKeyFrame créent une transition linéaire fluide entre les valeurs.
Au bout de la demi-seconde suivante, utilise une instance de la classe DiscreteSizeKeyFrame pour augmenter soudainement la taille de l'arc. Les images clés discrètes telles que DiscreteSizeKeyFrame créent des sauts soudains entre les valeurs, c'est-à-dire que les modifications de taille se produisent soudainement et ne sont pas subtiles.
Pendant les deux dernières secondes, utilise une instance de la classe SplineSizeKeyFrame pour augmenter la taille de l'arc. Des images clé spline telles que SplineSizeKeyFrame créent une transition variable entre des valeurs en fonction des valeurs de la propriété KeySpline. Dans cet exemple, la taille de l'arc augmente d'abord lentement, puis augmente de façon exponentielle vers la fin du segment temporel.
<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas HorizontalAlignment="Left" Margin="0" >
<!-- Create an arc on the screen that animates its size when it loads. -->
<Path Stroke="Black" StrokeThickness="2" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,200">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment x:Name="myArcSegment" Size="90,80"
SweepDirection="Clockwise" Point="500,200" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard Name="myBeginStoryBoard">
<Storyboard>
<!-- Animating the Size property uses 3 KeyFrames. -->
<SizeAnimationUsingKeyFrames
Storyboard.TargetName="myArcSegment"
Storyboard.TargetProperty="Size" >
<SizeAnimationUsingKeyFrames.KeyFrames>
<!-- Using a LinearSizeKeyFrame, the size of the arc increases
gradually over the first half second of the animation. -->
<LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />
<!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
after the first second of the animation. -->
<DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />
<!-- Using a SplineSizeKeyFrame, the Size increases slowly at first
and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
<SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />
</SizeAnimationUsingKeyFrames.KeyFrames>
</SizeAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>
Pour obtenir l'exemple complet, consultez Animation d'image clé, exemple.
Voir aussi
Référence
Concepts
Vue d'ensemble des animations d'image clé