Condividi tramite

Procedura: Animare una matrice usando fotogrammi chiave

  • Articolo

In questo esempio viene illustrato come animare la proprietà Matrix di un MatrixTransform usando fotogrammi chiave.

Esempio

Nell'esempio seguente viene utilizzata la classe MatrixAnimationUsingKeyFrames per animare la proprietà Matrix di un MatrixTransform. Nell'esempio viene utilizzato l'oggetto MatrixTransform per trasformare l'aspetto e la posizione di un Button.

Questa animazione usa la classe DiscreteMatrixKeyFrame per creare due fotogrammi chiave ed esegue le operazioni seguenti:

  1. Aggiunge un'animazione alla prima Matrix durante i primi 0,2 secondi. L'esempio modifica le proprietà M11 e M12 del Matrix. Questa modifica fa sì che il pulsante si allunghi e si deformi. L'esempio modifica anche le proprietà OffsetX e OffsetY in modo che il pulsante cambi posizione.

  2. Anima il secondo Matrix a 1,0 secondi. Il pulsante si sposta in un'altra posizione e nel frattempo non è più asimmetrico o allungato.

  3. Ripete l'animazione per un periodo illimitato.

Nota

I fotogrammi chiave che derivano dall'oggetto DiscreteMatrixKeyFrame creano salti improvvisi tra i valori, vale a dire il movimento dell'animazione è a scatti.

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

Per l'esempio completo, vedere esempio di animazione basata su fotogrammi chiave.

Vedere anche