Delen via

Procedure: Een object animeren met behulp van sleutelframes

  • Artikel

In dit voorbeeld ziet u hoe u een object kunt animeren, dat in dit voorbeeld de eigenschap Background van een Page besturingselement is met behulp van sleutelframes.

Voorbeeld

In het volgende voorbeeld wordt de ObjectAnimationUsingKeyFrames-klasse gebruikt om kleurwijzigingen te animeren voor de Background-eigenschap van een Page-besturing. De voorbeeldanimatie verandert naar een andere achtergrondkleur met regelmatige tussenpozen. Deze animatie maakt gebruik van de DiscreteObjectKeyFrame-klasse om drie verschillende sleutelframes te maken. De animatie maakt gebruik van sleutelframes op de volgende manier:

  1. Aan het einde van de eerste seconde wordt een exemplaar van de klasse LinearGradientBrush geanimeerd. In dit gedeelte van het voorbeeld wordt een lineaire kleurovergang toegepast op de achtergrondkleur, zodat de kleur van geel naar oranje naar rood overgaat.

  2. Aan het einde van de volgende seconde wordt een instantie van de klasse RadialGradientBrush geanimeerd. In dit gedeelte van het voorbeeld wordt een radiale kleurovergang toegepast op de achtergrondkleur, zodat de kleur van wit naar blauw naar zwart overgaat.

  3. Aan het eind van de derde seconde wordt een exemplaar van de klasse DrawingBrush geanimeerd. In dit gedeelte van het voorbeeld wordt een schaakbordpatroon toegepast op de achtergrond.

  4. De animatie begint opnieuw en herhaalt voor onbepaalde tijd.

Notitie

DiscreteObjectKeyFrame is het enige type sleutelframe dat u kunt gebruiken met de klasse ObjectAnimationUsingKeyFrames. Sleutelframes zoals DiscreteObjectKeyFrame plotselinge wijzigingen in waarden maken, dat wil bijvoorbeeld dat de kleurwijzigingen in dit voorbeeld plotseling optreden.

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

Zie KeyFrame Animation Samplevoor het volledige voorbeeld.

Zie ook