Comment : animer l'épaisseur d'une bordure à l'aide d'images clés
Mise à jour : novembre 2007
Cet exemple montre comment animer la propriété BorderThickness d'un Border.
Exemple
L'exemple suivant utilise la classe ThicknessAnimationUsingKeyFrames pour animer la propriété BorderThickness d'un Border. Cette animation utilise trois images clés de la manière suivante :
Pendant la première demi-seconde, utilise une instance de la classe LinearThicknessKeyFrame pour augmenter progressivement l'épaisseur de la bordure. L'exemple utilise LinearThicknessKeyFrame pour créer une augmentation linéaire fluide entre les valeurs.
Au bout de la demi-seconde suivante, utilise une instance de la classe DiscreteThicknessKeyFrame pour augmenter soudainement l'épaisseur de la bordure. Les images clés discrètes comme celles dérivées de DiscreteThicknessKeyFrame créent des sauts soudains entre les valeurs ; autrement dit, le mouvement de l'animation est saccadé.
Pendant les deux dernières secondes, utilise une instance de la classe SplineThicknessKeyFrame pour réduire l'épaisseur de la bordure. Des images clé Spline telles que celles dérivées de SplineThicknessKeyFrame créent une transition variable entre des valeurs en fonction des valeurs de la propriété KeySpline. Dans cette image clé, l'animation commence lentement et accélère de façon exponentielle vers la fin du segment temporel.
<!-- This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameExamples.ThicknessAnimationUsingKeyFramesExample"
Name="myRootElement"
WindowTitle="ThicknessAnimationUsingKeyFrames Example">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="1"
Margin="0,60,0,20" Padding="20" >
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animating the BorderThickness property uses 3 KeyFrames. -->
<ThicknessAnimationUsingKeyFrames
Storyboard.TargetProperty="BorderThickness"
Duration="0:0:5" FillBehavior="HoldEnd" RepeatBehavior="Forever">
<ThicknessAnimationUsingKeyFrames.KeyFrames>
<!-- Using a LinearThicknessKeyFrame, thickness increases gradually
over the first half second of the animation. -->
<LinearThicknessKeyFrame KeyTime="0:0:0.5">
<LinearThicknessKeyFrame.Value>
<Thickness Left="8" Right="8" Top="6" Bottom="6" />
</LinearThicknessKeyFrame.Value>
</LinearThicknessKeyFrame>
<!-- Using a DiscreteThicknessKeyFrame, thickness increases suddenly
after the first second of the animation. -->
<DiscreteThicknessKeyFrame KeyTime="0:0:1">
<DiscreteThicknessKeyFrame.Value>
<Thickness Left="28" Right="28" Top="24" Bottom="24" />
</DiscreteThicknessKeyFrame.Value>
</DiscreteThicknessKeyFrame>
<!-- Using a SplineThicknessKeyFrame, thickness decreases slowly at first
and then suddenly contracts. This KeyFrame takes 2 seconds. -->
<SplineThicknessKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3">
<SplineThicknessKeyFrame.Value>
<Thickness Left="1" Right="1" Top="1" Bottom="8" />
</SplineThicknessKeyFrame.Value>
</SplineThicknessKeyFrame>
</ThicknessAnimationUsingKeyFrames.KeyFrames>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<TextBlock>
This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border.
</TextBlock>
</Border>
</StackPanel>
</Page>
Pour l'exemple complet, consultez Animation d'image clé, exemple.
Voir aussi
Tâches
Animation d'image clé, exemple
Comment : animer une valeur BorderThickness
Concepts
Vue d'ensemble des animations d'image clé