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

Cet exemple indique comment animer la propriété Matrix d'un MatrixTransform à l'aide d'images clés.

Exemple

L'exemple suivant utilise la classe MatrixAnimationUsingKeyFrames pour animer la propriété Matrix d'un MatrixTransform. L'exemple utilise l'objet MatrixTransform pour transformer l'apparence et la position d'un Button.

Cette animation utilise la classe DiscreteMatrixKeyFrame pour créer deux images clés et effectue les opérations suivantes avec elles :

1. Anime la première Matrix pendant les 0,2 premières secondes. L'exemple modifie les propriétés M11 et M12 de la Matrix. À la suite de cette modification, le bouton s'étire et s'incline. L'exemple modifie également les propriétés OffsetX et OffsetY afin que le bouton change de position.

2. Anime la deuxième Matrix à 1,0 seconde. Le bouton se déplace à une autre position et n'est plus incliné ni étiré.

3. Répète l'animation indéfiniment.

Remarque
Les images clés qui dérivent de l'objet DiscreteMatrixKeyFrame créent des sauts soudains entre les valeurs ; autrement dit, le mouvement de l'animation est saccadé.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
  Title="MatrixAnimationUsingPath Example">
  <StackPanel Margin="20">
    <Canvas HorizontalAlignment="Left" Width="340" Height="240" >

      <!-- The Button that is animated. -->
      <Button Margin="-30,0,0,0" MinWidth="100">
        Click
        <Button.RenderTransform>
          <MatrixTransform x:Name="myMatrixTransform">
            <MatrixTransform.Matrix >
              <Matrix OffsetX="10" OffsetY="100"/>
            </MatrixTransform.Matrix>
          </MatrixTransform>
        </Button.RenderTransform>
        <Button.Triggers>
          <EventTrigger RoutedEvent="Button.Loaded">
            <BeginStoryboard>
              <Storyboard>

                <!-- Animates the button's MatrixTransform using MatrixAnimationUsingKeyFrames. 
                Animates to first Matrix in the first 0.2 seconds, to second Matrix in the next
                second, and then starts over. Notice that the first KeyFrame stretches the button
                and skews it using the M11 and M12 Matrix properties respectively. Also, animations are 
                using Discrete interpolation, so the MatrixTransform appears to "jump" from one value 
                to the next. -->
                <MatrixAnimationUsingKeyFrames
                Storyboard.TargetName="myMatrixTransform"
                Storyboard.TargetProperty="Matrix"
                Duration="0:0:3" 
                RepeatBehavior="Forever">
                  <DiscreteMatrixKeyFrame KeyTime="0:0:0.2">
                    <DiscreteMatrixKeyFrame.Value>
                      <Matrix OffsetX="100" OffsetY="200" M11="3" M12="1" />
                    </DiscreteMatrixKeyFrame.Value>
                  </DiscreteMatrixKeyFrame>
                  <DiscreteMatrixKeyFrame KeyTime="0:0:1">
                    <DiscreteMatrixKeyFrame.Value>
                      <Matrix OffsetX="300" OffsetY="100" M11="1" M12="0" />
                    </DiscreteMatrixKeyFrame.Value>
                  </DiscreteMatrixKeyFrame>
                </MatrixAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>

        </Button.Triggers>
      </Button>

    </Canvas>
  </StackPanel>
</Page>

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

Voir aussi

Référence

Matrix

MatrixTransform

Concepts

Vue d'ensemble des animations d'image clé

Autres ressources

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