Partager via


Comment : animer l'épaisseur d'une bordure à l'aide d'images clés

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 :

  1. 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.

  2. 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é.

  3. 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 obtenir l'exemple complet, consultez Animation d'image clé, exemple.

Voir aussi

Tâches

Comment : animer une valeur BorderThickness

Référence

LinearThicknessKeyFrame

DiscreteThicknessKeyFrame

SplineThicknessKeyFrame

Concepts

Vue d'ensemble des animations d'image clé

Autres ressources

Rubriques "Comment" relatives aux animations d'images clés