Share via

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

  • 發行項

此範例示範如何使用主要畫面格， Matrix 以動畫顯示 的 MatrixTransform 屬性。

範例

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

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

  1. 在前 0.2 秒內建立第一個 Matrix 動畫。 此範例會變更 M11 的 Matrix 和 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>

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

另請參閱