共用方式為

如何：使用主要畫面格建立矩陣的動畫

  • 發行項

此範例示範如何使用主要畫面格，建立 MatrixTransform 的 Matrix 屬性的動畫效果。

範例

下列範例會使用 MatrixAnimationUsingKeyFrames 類別，以建立 MatrixTransform 之 Matrix 屬性的動畫效果。 此範例會使用 MatrixTransform 物件來轉換 Button 的外觀和位置。

此動畫會使用 DiscreteMatrixKeyFrame 類別來建立兩個主要畫面格，並使用其執行下列動作：

  1. 在前 0.2 秒 內建立第一個 Matrix 的動畫效果。 此範例會變更 Matrix 的 M11 和 M12 屬性。 這項變更會導致按鈕伸展而扭曲。 此範例也會變更 OffsetX 和 OffsetY 屬性，讓按鈕變更位置。

  2. 以 1.0 秒建立第二個的 Matrix 動畫效果。 當按鈕不再扭曲或伸展時，按鈕會移至另一個位置。

  3. 無限期地重複動畫。

注意

衍生自 DiscreteMatrixKeyFrame 物件的主要畫面格會在值之間突然跳躍，也就是說，動畫的移動很不順暢。

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

如需完整的範例，請參閱主要畫面格動畫範例。

另請參閱