Udostępnij przez

Jak animować obiekt przy użyciu klatek kluczowych

W tym przykładzie pokazano, jak animować obiekt, który w tym przykładzie jest właściwością Background kontrolki Page przy użyciu klatek kluczowych.

Przykład

W poniższym przykładzie użyto klasy ObjectAnimationUsingKeyFrames do animowania zmian kolorów dla właściwości Background kontrolki Page. Przykładowa animacja zmienia się na inny pędzl tła w regularnych odstępach czasu. Ta animacja używa klasy DiscreteObjectKeyFrame do tworzenia trzech różnych klatek kluczowych. Animacja używa klatek kluczowych w następujący sposób:

  1. Na końcu pierwszej sekundy animuje wystąpienie klasy LinearGradientBrush. W tej sekcji przykładu stosowany jest gradient liniowy do koloru tła, dzięki czemu kolor przechodzi z żółtego na pomarańczowy do czerwonego.

  2. Na końcu następnej sekundy animuje wystąpienie klasy RadialGradientBrush. W tej sekcji przykładu stosowany jest gradient promieniowy do koloru tła, dzięki czemu kolor przechodzi od białego, przez niebieski, aż do czarnego.

  3. Pod koniec trzeciej sekundy animuje wystąpienie klasy typu DrawingBrush. Ta sekcja przykładu stosuje wzór szachownicy do tła.

  4. Animacja zaczyna się ponownie i powtarza w nieskończoność.

Uwaga / Notatka

DiscreteObjectKeyFrame jest jedynym typem klatki kluczowej, której można używać z klasą ObjectAnimationUsingKeyFrames. Klatki kluczowe, takie jak DiscreteObjectKeyFrame tworzą nagłe zmiany w wartościach, czyli zmiany kolorów w tym przykładzie występują nagle.

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

Aby zapoznać się z kompletnym przykładem, zobacz przykład KeyFrame Animation .

Zobacz także

  • Last updated on