Dela via

Anvisningar: Animera ett objekt med hjälp av nyckelramar

  • Artikel

Det här exemplet visar hur du animerar ett objekt, vilket i det här exemplet är egenskapen Background för en Page kontroll med hjälp av nyckelramar.

Exempel

I följande exempel används klassen ObjectAnimationUsingKeyFrames för att animera färgändringar för egenskapen Background för en Page kontroll. Exempelanimeringen ändras till en annan bakgrundspensel med jämna mellanrum. Den här animeringen använder klassen DiscreteObjectKeyFrame för att skapa tre olika nyckelramar. Animeringen använder nyckelramar på följande sätt:

  1. I slutet av den första sekunden animerar en instans av klassen LinearGradientBrush. Det här avsnittet i exemplet tillämpar en linjär toning på bakgrundsfärgen så att färgen övergår från gult till orange till rött.

  2. I slutet av nästa sekund animerar en instans av klassen RadialGradientBrush. Det här avsnittet i exemplet tillämpar en radiell toning på bakgrundsfärgen så att färgen övergår från vitt till blått till svart.

  3. Vid slutet av den tredje sekunden animeras en instans av klassen DrawingBrush. Det här avsnittet i exemplet tillämpar ett rutmönster på bakgrunden.

  4. Animeringen börjar igen och upprepas på obestämd tid.

Notera

DiscreteObjectKeyFrame är den enda typen av nyckelram som du kan använda med klassen ObjectAnimationUsingKeyFrames. Viktiga bildrutor, som DiscreteObjectKeyFrame, skapar plötsliga ändringar i värden, det vill säga att färgändringarna i det här exemplet sker plötsligt.

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

Det fullständiga exemplet finns i Exempel på keyframe-animering.

Se även