Comment : animer des modifications de taille à l'aide d'images clés

  • Article

Cet exemple explique comment animer des modifications de taille à l’aide d’images clés.

Exemple

L’exemple suivant utilise la SizeAnimationUsingKeyFrames classe pour animer la Size propriété d’un ArcSegment. Cette animation utilise trois images clés de la manière suivante :

  1. Au cours de la première moitié de l’animation, utilise une instance de la LinearSizeKeyFrame classe pour augmenter progressivement la taille de l’arc. Images clés linéaires comme LinearSizeKeyFrame créer une transition linéaire fluide entre les valeurs.

  2. À la fin de la demi-seconde suivante, utilise une instance de la DiscreteSizeKeyFrame classe pour augmenter soudainement la taille de l’arc. Les images clés discrètes comme DiscreteSizeKeyFrame créer des sauts soudains entre les valeurs, autrement dit, les changements de taille se produisent soudainement et ne sont pas subtils.

  3. Au cours des deux dernières secondes, utilise une instance de la SplineSizeKeyFrame classe pour augmenter la taille de l’arc. Trames clés spline telles que SplineSizeKeyFrame créer une transition de variable entre les valeurs en fonction des valeurs de la KeySpline propriété. Dans cet exemple, la taille de l’arc augmente lentement dans un premier temps, 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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 l’exemple complet, consultez la page Animation d’image clé, exemple.

Voir aussi