Freigeben über


Gewusst wie: Animieren von Größenänderungen mithilfe von Keyframes

Aktualisiert: November 2007

In diesem Beispiel wird das Animieren von Größenänderungen mithilfe von Keyframes veranschaulicht.

Beispiel

Im folgenden Beispiel wird die SizeAnimationUsingKeyFrames-Klasse verwendet, um die Size-Eigenschaft eines ArcSegment zu animieren. In dieser Animation werden drei Keyframes folgendermaßen verwendet:

  1. In der ersten halben Sekunde der Animation wird eine Instanz der LinearSizeKeyFrame-Klasse verwendet, um die Größe des Bogens graduell zu erhöhen. Durch lineare Keyframes wie LinearSizeKeyFrame wird ein glatter, linearer Übergang zwischen Werten ermöglicht.

  2. Am Ende der nächsten halben Sekunde wird eine Instanz der DiscreteSizeKeyFrame-Klasse verwendet, um die Größe des Bogens abrupt zu erhöhen. Diskrete Keyframes wie DiscreteSizeKeyFrame ermöglichen abrupte Sprünge zwischen Werten, d.h. Änderungen der Animation treten plötzlich und deutlich sichtbar auf.

  3. Im Verlauf der letzten zwei Sekunden wird eine Instanz der SplineSizeKeyFrame-Klasse verwendet, um die Größe des Bogens zu erhöhen. Spline-Keyframes wie SplineSizeKeyFrame erzeugen einen variablen Übergang zwischen Werten, die von der KeySpline-Eigenschaft bestimmt werden. In diesem Beispiel wächst die Größe des Bogens zunächst nur langsam und steigt dann exponentiell zum Ende des Zeitabschnitts.

<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >

    <Canvas HorizontalAlignment="Left" Margin="0" >

      <!-- Create an arc on the screen that animates its size when it loads. -->
      <Path Stroke="Black" StrokeThickness="2" >
        <Path.Data>
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure StartPoint="100,200">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <ArcSegment x:Name="myArcSegment" Size="90,80" 
                      SweepDirection="Clockwise"  Point="500,200" />
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>
        </Path.Data>
        <Path.Triggers>
          <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard Name="myBeginStoryBoard">
              <Storyboard>

                <!-- Animating the Size property uses 3 KeyFrames. -->
                <SizeAnimationUsingKeyFrames
                Storyboard.TargetName="myArcSegment"
                Storyboard.TargetProperty="Size" >
                  <SizeAnimationUsingKeyFrames.KeyFrames>
                    <!-- Using a LinearSizeKeyFrame, the size of the arc increases
                         gradually over the first half second of the animation. -->
                    <LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />

                    <!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
                    after the first second of the animation. -->
                    <DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />

                    <!-- Using a SplineSizeKeyFrame, the Size increases slowly at first 
                         and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
                    <SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />

                  </SizeAnimationUsingKeyFrames.KeyFrames>
                </SizeAnimationUsingKeyFrames>

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>

</Page>

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

Siehe auch

Aufgaben

Beispiel für eine Keyframe-Animation

Konzepte

Übersicht über Keyframe-Animationen

Referenz

SizeAnimationUsingKeyFrames

Size

ArcSegment

LinearSizeKeyFrame

DiscreteSizeKeyFrame

SplineSizeKeyFrame

Weitere Ressourcen

Gewusst-wie-Themen zur Keyframe-Animation