Udostępnij za pośrednictwem

Jak animować Matrix z wykorzystaniem klatek kluczowych

  • Artykuł

W tym przykładzie pokazano, jak animować Matrix właściwość obiektu MatrixTransform przy użyciu klatek kluczowych.

Przykład

W poniższym przykładzie użyto MatrixAnimationUsingKeyFrames klasy do animowania Matrix właściwości klasy MatrixTransform. W przykładzie użyto MatrixTransform obiektu , aby przekształcić wygląd i położenie obiektu Button.

Ta animacja używa klasy do utworzenia DiscreteMatrixKeyFrame dwóch klatek kluczowych i wykonuje następujące czynności:

  1. Animuje pierwszy Matrix w ciągu pierwszych 0,2 sekund. Przykład zmienia M11 właściwości i M12 obiektu Matrix. Ta zmiana powoduje rozciąganie przycisku i staje się niesymetryczne. Przykład zmienia OffsetX również właściwości i OffsetY tak, aby przycisk zmienił położenie.

  2. Animuje sekundę Matrix o 1,0 sekundy. Przycisk przechodzi do innej pozycji, gdy przycisk nie jest już niesymetryczny lub rozciągnięty.

  3. Powtarza animację w nieskończoność.

Uwaga

Klatki kluczowe pochodzące z DiscreteMatrixKeyFrame obiektu tworzą nagłe skoki między wartościami, czyli ruch animacji jest szarpany.

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

Pełny przykład można znaleźć w temacie KeyFrame Animation Sample (Przykład animacji klatek kluczowych).

Zobacz też