通过

如何：使用关键帧对矩阵进行动画处理

  • 项目

此示例演示如何使用关键帧对 MatrixTransform 的 Matrix 属性进行动画处理。

例

以下示例使用 MatrixAnimationUsingKeyFrames 类对 MatrixTransform的 Matrix 属性进行动画处理。 该示例使用 MatrixTransform 对象来转换 Button的外观和位置。

此动画使用 DiscreteMatrixKeyFrame 类创建两个关键帧，并用它们执行以下操作：

  1. 在前 0.2 秒内对第一个 Matrix 进行动画处理。 该示例更改 Matrix的 M11 和 M12 属性。 此更改会导致按钮拉伸并倾斜。 该示例还会更改 OffsetX 和 OffsetY 属性，以便按钮更改位置。

  2. 将第二个 Matrix 动画处理为 1.0 秒。 当按钮不再倾斜或拉伸时，该按钮将移动到另一个位置。

  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>

有关完整示例，请参阅 关键帧动画示例。

另请参阅