Como: Animar uma matriz usando quadros-chave

Este exemplo mostra como animar a propriedade Matrix de um MatrixTransform usando quadros-chave.

Exemplo

O exemplo a seguir usa a classe MatrixAnimationUsingKeyFrames para animar a propriedade Matrix de um MatrixTransform. O exemplo usa o objeto MatrixTransform para transformar a aparência e a posição de um Button.

Esta animação usa a DiscreteMatrixKeyFrame classe para criar dois quadros-chave e faz o seguinte com eles:

1. Anima o primeiro Matrix durante os primeiros 0,2 segundos. O exemplo altera as M11 propriedades e M12 do Matrix. Essa alteração faz com que o botão se estique e fique distorcido. O exemplo também altera as OffsetX propriedades e OffsetY para que o botão mude de posição.

2. Anima o segundo Matrix em 1,0 segundos. O botão se move para outra posição enquanto o botão não está mais inclinado ou esticado.

3. Repete a animação indefinidamente.

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

Para o exemplo completo, consulte KeyFrame Animation Sample.

Ver também

• Matrix
• MatrixTransform
• Visão geral das animações Key-Frame
• Key-Frame Tópicos de instruções