如何：使用关键帧对 Matrix 进行动画处理
此示例演示如何使用关键帧对 MatrixTransform 的 Matrix 属性进行动画处理。
示例
下面的示例使用 MatrixAnimationUsingKeyFrames 类对 MatrixTransform 的 Matrix 属性进行动画处理。 该示例使用 MatrixTransform 对象来转换 Button 的外观和位置。
此动画使用 DiscreteMatrixKeyFrame 类来创建两个关键帧并对它们执行以下操作：
在头 0.2 秒内对第一个 Matrix 进行动画处理。 此示例更改 Matrix 的 M11 和 M12 属性。 此更改导致按钮拉伸并扭曲。 此示例还更改 OffsetX 和 OffsetY 属性，使按钮改变位置。
在 1.0 秒处对第二个 Matrix 进行动画处理。 此按钮移到其他位置，同时此按钮不再是扭曲或拉伸的。
无限地重复此动画。
.gif "注意") 注意 |
|---|
从 DiscreteMatrixKeyFrame 对象派生的关键帧创建值之间的突然跳变，也就是说，动画的运动是不平稳的。 |
<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>
有关完整示例，请参见 KeyFrame Animation Sample（KeyFrame 动画示例）。