HOW TO：使用主要畫面格建立矩陣的動畫
更新：2007 年 11 月
本範例說明如何使用主要畫面格，將 MatrixTransform 的 Matrix 屬性顯示為動畫。
範例
下列範例會使用 MatrixAnimationUsingKeyFrames 類別將 MatrixTransform 的 Matrix 屬性顯示為動畫。這個範例使用 MatrixTransform 物件轉換 Button 的外觀和位置。
這個動畫使用 DiscreteMatrixKeyFrame 類別建立兩個主要畫面格，並以這兩個畫面格執行下列作業：
讓第一個 Matrix 在前 0.2 秒產生動畫效果。此範例會變更 Matrix 的 M11 和 M12 屬性。這項變更會讓按鈕產生延伸及傾斜的效果。此範例也會變更 OffsetX 和 OffsetY 屬性，使按鈕的位置改變。
讓第二個 Matrix 在 1.0 秒內產生動畫效果。按鈕會移到另一個位置，但是按鈕不會延伸也不會傾斜。
不斷重複動畫效果。
.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 動畫範例。