Freigeben über

Vorgehensweise: Animieren eines Objekts mithilfe von Keyframes

In diesem Beispiel wird gezeigt, wie Sie ein Objekt animieren, bei dem es sich in diesem Beispiel um die Background Eigenschaft eines Page Steuerelements mithilfe von Keyframes handelt.

Beispiel

Im folgenden Beispiel wird die ObjectAnimationUsingKeyFrames Klasse verwendet, um Farbänderungen für die Background Eigenschaft eines Page Steuerelements zu animieren. Die Beispielanimation wechselt in regelmäßigen Abständen zu einem anderen Hintergrundpinsel. Diese Animation verwendet die DiscreteObjectKeyFrame Klasse, um drei verschiedene Keyframes zu erstellen. Die Animation verwendet Keyframes auf folgende Weise:

  1. Am Ende der ersten Sekunde wird eine Instanz der LinearGradientBrush Klasse animiert. In diesem Abschnitt des Beispiels wird ein linearer Farbverlauf auf die Hintergrundfarbe angewendet, sodass die Farbe von Gelb zu Orange in Rot wechselt.

  2. Am Ende der nächsten Sekunde wird eine Instanz der Klasse RadialGradientBrush animiert. In diesem Abschnitt des Beispiels wird ein Radialfarbverlauf auf die Hintergrundfarbe angewendet, sodass die Farbe von Weiß zu Blau zu Schwarz wechselt.

  3. Am Ende der dritten Sekunde wird eine Instanz der DrawingBrush Klasse animiert. In diesem Abschnitt des Beispiels wird ein Häkchenmuster auf den Hintergrund angewendet.

  4. Die Animation beginnt erneut und wiederholt sich auf unbestimmte Zeit.

Hinweis

DiscreteObjectKeyFrame ist der einzige Keyframetyp, den Sie mit der ObjectAnimationUsingKeyFrames Klasse verwenden können. Keyframes wie DiscreteObjectKeyFrame plötzliche Änderungen an Werten erstellen, d. h. die Farbänderungen in diesem Beispiel treten plötzlich auf.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Page.Triggers>
      <EventTrigger RoutedEvent="Page.Loaded">
        <BeginStoryboard>
          <Storyboard>

            <!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
                 an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
                 swap different brush objects at regular intervals, making the background of the Page
                 change. -->
            <ObjectAnimationUsingKeyFrames
              Storyboard.TargetProperty="Background"
              Duration="0:0:4" RepeatBehavior="Forever">
            <ObjectAnimationUsingKeyFrames.KeyFrames>

              <!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for 
              use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
              a specified timeline. Other types of interpolation are too problematic to apply
              to objects.  -->
              
              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes 
                   to a LinearGradientBrush after the first second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:1">
                <DiscreteObjectKeyFrame.Value>
                  <LinearGradientBrush>
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="Yellow" Offset="0.0" />
                      <GradientStop Color="Orange" Offset="0.5" />
                      <GradientStop Color="Red" Offset="1.0" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>
                  
              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes 
                   to a RadialGradientBrush after the second second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                  <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <RadialGradientBrush.GradientStops>
                      <GradientStop Color="White" Offset="0.0" />
                      <GradientStop Color="MediumBlue" Offset="0.5" />
                      <GradientStop Color="Black" Offset="1.0" />
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>

              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly 
                   changes to a DrawingBrush (creates a checkerboard pattern) after the 
                   third second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:3">
                <DiscreteObjectKeyFrame.Value>
                  <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
                    <DrawingBrush.Drawing>
                      <DrawingGroup>
                        <DrawingGroup.Children>
                          <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                              <RectangleGeometry Rect="0,0,1,1" />
                            </GeometryDrawing.Geometry>
                          </GeometryDrawing>
                          <GeometryDrawing Brush="Black"
                           Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
                        </DrawingGroup.Children>
                      </DrawingGroup>
                    </DrawingBrush.Drawing>
                  </DrawingBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>          
            </ObjectAnimationUsingKeyFrames.KeyFrames>
          </ObjectAnimationUsingKeyFrames>        
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Page.Triggers>
</Page>

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

Siehe auch

  • Last updated on