Gewusst wie: Animieren einer Matrix mithilfe von Keyframes
Aktualisiert: November 2007
In diesem Beispiel wird die Animation der Matrix-Eigenschaft eines MatrixTransforms mithilfe von Keyframes veranschaulicht.
Beispiel
Im folgenden Beispiel wird die MatrixAnimationUsingKeyFrames-Klasse verwendet, um die Matrix-Eigenschaft eines MatrixTransform-Elements zu animieren. Es wird das MatrixTransform-Objekt verwendet, um das Aussehen und die Position eines Button-Steuerelements zu transformieren.
Diese Animation verwendet die DiscreteMatrixKeyFrame-Klasse, um zwei Keyframes zu erstellen, und behandelt die Keyframes dann wie folgt:
Animiert während der ersten 0,2 Sekunden die erste Matrix. Im Beispiel werden die Eigenschaften M11 und M12 der Matrix geändert. Diese Änderung bewirkt, dass sich die Schaltfläche streckt und dass sie verzerrt wird. Im Beispiel werden außerdem die Eigenschaften OffsetX und OffsetY geändert, um die Position der Schaltfläche zu ändern.
Animiert bei 1,0 Sekunden die zweite Matrix. Die Schaltfläche wird an eine andere Position verschoben, und die Schaltfläche ist nicht mehr verzerrt oder gestreckt.
Wiederholt die Animation ohne zeitliche Begrenzung.
Tipp
Keyframes, die vom DiscreteMatrixKeyFrame-Objekt abgeleitet sind, führen zu plötzlichen Sprüngen zwischen verschiedenen Werten. Die Ausführung der Animation erfolgt also ruckartig.
<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>
Das vollständige Beispiel finden Sie unter Beispiel für eine Keyframe-Animation.
Siehe auch
Aufgaben
Beispiel für eine Keyframe-Animation
Konzepte
Übersicht über Keyframe-Animationen