Freigeben über

Vorgehensweise: Animieren von Größenänderungen mithilfe von Keyframes

In diesem Beispiel wird gezeigt, wie Größenänderungen mithilfe von Keyframes animiert werden.

Beispiel

Im folgenden Beispiel wird die SizeAnimationUsingKeyFrames-Klasse verwendet, um die Size-Eigenschaft von ArcSegment zu animieren. Diese Animation verwendet drei Keyframes auf folgende Weise:

  1. Während der ersten halben Sekunde der Animation wird eine Instanz der LinearSizeKeyFrame-Klasse verwendet, um die Größe des Bogens allmählich zu erhöhen. Lineare Keyframes wie LinearSizeKeyFrame erzeugen einen nahtlosen linearen Übergang zwischen den Werten.

  2. Am Ende der nächsten Hälfte verwendet eine Instanz der DiscreteSizeKeyFrame-Klasse, um die Größe des Bogens plötzlich zu erhöhen. Diskrete Schlüsselrahmen wie DiscreteSizeKeyFrame schaffen plötzliche Sprünge zwischen Werten, das heißt, die Größenänderungen treten plötzlich auf und sind nicht subtil.

  3. In den 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 den Werten je nach den Werten der KeySpline-Eigenschaft. In diesem Beispiel nimmt die Größe des Bogens zunächst langsam zu und nimmt dann exponentiell zum Ende des Zeitsegments zu.

<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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 KeyFrame-Animationsbeispiel.

Siehe auch

  • Last updated on