Condividi tramite

Procedura: animare una matrice utilizzando fotogrammi chiave

  • Articolo

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

Esempio

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

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

  1. Anima il primo Matrix durante i primi 0,2 secondi. Nell'esempio vengono apportate modifiche alle M11 proprietà e M12 di Matrix. Questa modifica fa sì che il pulsante si allunga e diventi asimmetrico. L'esempio modifica anche le OffsetX proprietà 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 mentre il pulsante 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, ovvero il movimento dell'animazione è cretino.

<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 con fotogrammi chiave.

Vedi anche