Comment : animer un objet à l'aide d'images clés

Cet exemple montre comment animer un objet qui, dans cet exemple, est la propriété Background d'un contrôle Page, à l'aide d'images clés.

Exemple

L'exemple suivant utilise la classe ObjectAnimationUsingKeyFrames pour animer des modifications de couleur pour la propriété Background d'un contrôle Page. L'exemple d'animation passe à un pinceau d'arrière-plan différent à intervalles réguliers. Cette animation utilise la classe DiscreteObjectKeyFrame pour créer trois images clés différentes. L'animation utilise des images clés de la manière suivante :

1. À la fin de la première seconde, anime une instance de la classe LinearGradientBrush. Cette section de l'exemple applique un dégradé linéaire à la couleur d'arrière-plan afin que la couleur passe du jaune au rouge en passant par le orange.

2. À la fin de la seconde suivante, anime une instance de la classe RadialGradientBrush. Cette section de l'exemple applique un dégradé radial à la couleur d'arrière-plan afin que la couleur passe du blanc au noir en passant par le bleu.

3. À la fin de la troisième seconde, anime une instance de la classe DrawingBrush. Cette section de l'exemple applique un damier à l'arrière-plan.

4. L'animation recommence et se répète indéfiniment.

Remarque
DiscreteObjectKeyFrame est le seul type d'image clé que vous pouvez utiliser avec la classe ObjectAnimationUsingKeyFrames.Les images clés comme DiscreteObjectKeyFrame créent des modifications soudaines dans les valeurs, c'est-à-dire que les modifications de couleur dans cet exemple se produisent soudainement.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
    <Page.Triggers>
      <EventTrigger RoutedEvent="Page.Loaded">
        <BeginStoryboard>
          <Storyboard>

            <!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
                 an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
                 swap different brush objects at regular intervals, making the background of the Page
                 change. -->
            <ObjectAnimationUsingKeyFrames
              Storyboard.TargetProperty="Background"
              Duration="0:0:4" RepeatBehavior="Forever">
            <ObjectAnimationUsingKeyFrames.KeyFrames>

              <!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for 
              use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
              a specified timeline. Other types of interpolation are too problematic to apply
              to objects.  -->

              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes 
                   to a LinearGradientBrush after the first second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:1">
                <DiscreteObjectKeyFrame.Value>
                  <LinearGradientBrush>
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="Yellow" Offset="0.0" />
                      <GradientStop Color="Orange" Offset="0.5" />
                      <GradientStop Color="Red" Offset="1.0" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>

              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes 
                   to a RadialGradientBrush after the second second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                  <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <RadialGradientBrush.GradientStops>
                      <GradientStop Color="White" Offset="0.0" />
                      <GradientStop Color="MediumBlue" Offset="0.5" />
                      <GradientStop Color="Black" Offset="1.0" />
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>

              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly 
                   changes to a DrawingBrush (creates a checkerboard pattern) after the 
                   third second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:3">
                <DiscreteObjectKeyFrame.Value>
                  <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
                    <DrawingBrush.Drawing>
                      <DrawingGroup>
                        <DrawingGroup.Children>
                          <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                              <RectangleGeometry Rect="0,0,1,1" />
                            </GeometryDrawing.Geometry>
                          </GeometryDrawing>
                          <GeometryDrawing Brush="Black"
                           Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
                        </DrawingGroup.Children>
                      </DrawingGroup>
                    </DrawingBrush.Drawing>
                  </DrawingBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>          
            </ObjectAnimationUsingKeyFrames.KeyFrames>
          </ObjectAnimationUsingKeyFrames>        
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Page.Triggers>
</Page>

Pour obtenir l'exemple complet, consultez Animation d'image clé, exemple.

Voir aussi

Référence

ObjectAnimationUsingKeyFrames

Background

Page

DiscreteObjectKeyFrame

LinearGradientBrush

RadialGradientBrush

DrawingBrush

Concepts

Vue d'ensemble des animations d'image clé

Autres ressources

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