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

  • Article

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

Exemple

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

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

  1. Anime le premier Matrix au cours des 0,2 premières secondes. L’exemple modifie les propriétés et M12 les M11 propriétés du Matrix. Cette modification entraîne l’étirement du bouton et devient asymétrique. L’exemple modifie également les propriétés et OffsetY les OffsetX propriétés afin que le bouton change de position.

  2. Anime la seconde Matrix à 1,0 seconde. Le bouton passe à une autre position alors que le bouton n’est plus asymétrique ou étiré.

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

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

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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 l’exemple complet, consultez la page Animation d’image clé, exemple.

Voir aussi