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 :
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.
Anime la deuxième Matrix à 1,0 seconde. Le bouton se déplace à une autre position et n'est plus incliné ni étiré.
Répète l'animation indéfiniment.
.gif "Remarque") 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
Concepts
Vue d'ensemble des animations d'image clé