Freigeben über

Vorgehensweise: Animieren einer Matrix mithilfe von Keyframes

Dieses Beispiel zeigt, wie Sie die Matrix-Eigenschaft einer MatrixTransform mithilfe von Keyframes animieren können.

Beispiel

Im folgenden Beispiel wird die MatrixAnimationUsingKeyFrames-Klasse verwendet, um die Matrix-Eigenschaft einer MatrixTransform zu animieren. Im Beispiel wird das MatrixTransform Objekt verwendet, um die Darstellung und Position eines Objekts Buttonzu transformieren.

Diese Animation verwendet die DiscreteMatrixKeyFrame Klasse, um zwei Keyframes zu erstellen und die folgenden Aktionen auszuführen:

  1. Animiert den ersten Matrix während der ersten 0,2 Sekunden. Im Beispiel werden die M11 Eigenschaften und M12 Eigenschaften der Matrix. Durch diese Änderung wird die Schaltfläche gestreckt und verzerrt. Im Beispiel werden auch die Und-Eigenschaften OffsetXOffsetY so geändert, dass sich die Position der Schaltfläche ändert.

  2. Animiert die Sekunde Matrix um 1,0 Sekunden. Die Schaltfläche wird an eine andere Position verschoben, während die Schaltfläche nicht mehr schief oder gestreckt ist.

  3. Wiederholt die Animation auf unbestimmte Zeit.

Hinweis

Keyframes, die vom DiscreteMatrixKeyFrame Objekt abgeleitet werden, erzeugen plötzliche Sprünge zwischen Werten, d. h. die Bewegung der Animation ist jerky.

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

Das vollständige Beispiel finden Sie unter KeyFrame-Animationsbeispiel.

Siehe auch