Partager via

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

  • Article

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. Au cours de la première moitié de 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. À la fin de la moitié de la seconde suivante, utilise une instance de la classe DiscreteThicknessKeyFrame pour augmenter soudainement l’épaisseur de la bordure. Des images clés discrètes, telles que celles dérivées de DiscreteThicknessKeyFrame, créent des sauts soudains entre les valeurs, c'est-à-dire que le mouvement de l'animation est saccadé.

  3. Au cours des deux dernières secondes, utilise une instance de la classe SplineThicknessKeyFrame pour réduire l’épaisseur de la bordure. Les images clés spline comme celles dérivées de SplineThicknessKeyFrame créent une transition variable entre les valeurs en fonction des valeurs de la propriété KeySpline. Dans cette image clé, l’animation démarre lentement et accélère exponentiellement vers la fin du segment de temps.

<!-- This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border. -->
<Page  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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 l’exemple d’animation de trames clés .

Voir aussi