Gewusst wie: Animieren einer Matrix mithilfe von Keyframes

In diesem Beispiel wird die Animation der Matrix-Eigenschaft einer MatrixTransform mithilfe von Keyframes veranschaulicht.

Beispiel

Im folgenden Beispiel wird die MatrixAnimationUsingKeyFrames-Klasse verwendet, um die Matrix-Eigenschaft eines MatrixTransform-Elements zu animieren. Es wird das MatrixTransform-Objekt verwendet, um das Aussehen und die Position eines Button-Steuerelements zu transformieren.

Diese Animation verwendet die DiscreteMatrixKeyFrame-Klasse, um zwei Keyframes zu erstellen, und behandelt die Keyframes dann wie folgt:

1. Animiert während der ersten 0,2 Sekunden die erste Matrix. Im Beispiel werden die Eigenschaften M11 und M12 der Matrix geändert. Diese Änderung bewirkt, dass sich die Schaltfläche streckt und dass sie verzerrt wird. Im Beispiel werden außerdem die Eigenschaften OffsetX und OffsetY geändert, um die Position der Schaltfläche zu ändern.

2. Animiert bei 1,0 Sekunden die zweite Matrix. Die Schaltfläche wird an eine andere Position verschoben, und die Schaltfläche ist nicht mehr verzerrt oder gestreckt.

3. Wiederholt die Animation ohne zeitliche Begrenzung.

Hinweis
Keyframes, die vom DiscreteMatrixKeyFrame-Objekt abgeleitet sind, führen zu plötzlichen Sprüngen zwischen verschiedenen Werten. Die Ausführung der Animation erfolgt also ruckartig.

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

Das vollständige Beispiel finden Sie unter Beispiel für eine Keyframe-Animation.

Siehe auch

Referenz

Matrix

MatrixTransform

Konzepte

Übersicht über Keyframe-Animationen

Weitere Ressourcen

Gewusst-wie-Themen zur Keyframe-Animation