Como: Animar uma Matriz Utilizando Quadros-Chave

Este exemplo demonstra como animar a propriedade Matrix de uma MatrixTransform utilizando chave de quadros.

Exemplo

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

Esta animação usa a classe DiscreteMatrixKeyFrame para criar duas chaves de quadro e realiza o seguinte com elas:

1. Anima a primeira Matrix durante os primeiros 0,2 segundos. O exemplo muda a propriedade M11 e M12 da Matrix. Esta modificação faz o botão alongar e ficar achatado. O exemplo também modifica a propriedade OffsetX e OffsetY para que o botão mude de posição.

2. Anima a segunda Matrix aos 1,0 segundos. O botão move para outra posição enquanto o botão não é mais achatado ou alongado.

3. Repete a animação indefinidamente.

Observação:
Quadros-chave que derivam do DiscreteMatrixKeyFrame objeto criar saltos repentinos entre valores, ou seja, a movimentação da animação é irregular.

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

For the complete sample, see Exemplo de animação KeyFrame.

Consulte também

Tarefas

Exemplo de animação KeyFrame

Conceitos

Visão geral de animações de Quadro-Chave

Referência

Matrix

MatrixTransform

Outros recursos

Key-Frame Animation How-to Topics