Como: Animar um Objeto Usando Quadros-Chave

Este exemplo mostra como animar um objeto, que neste exemplo é a propriedade Background de um controle Page, usando quadro de chaves.

Exemplo

O exemplo a seguir usa a classe ObjectAnimationUsingKeyFrames para animar as alterações de cor da propriedade Background de um controle Page. A animação do exemplo altera o pincel do plano de fundo em intervalos regulares. Esta animação usa a classe DiscreteObjectKeyFrame para criar três quadros-chave diferentes. A animação usa quadros-chave da seguinte forma:

1. No final do primeiro segundo, anima uma instância da classe LinearGradientBrush. Esta seção do exemplo aplica um gradiente linear à cor do plano de fundo para que a cor faça a transição de amarelo para laranja para vermelho.

2. No final do próximo segundo, anima uma instância da classe RadialGradientBrush. Esta seção do exemplo aplica um gradiente radial à cor do plano de fundo para que a cor faça a transição do branco para azul para preto.

3. No final do terceiro segundo, anima uma instância da classe DrawingBrush. Esta seção do exemplo aplica um padrão quadriculado ao plano de fundo.

4. A animação começa novamente e repete indefinidamente.

Observação:
DiscreteObjectKeyFrame é o único tipo de quadro-chave que você pode usar com a classe ObjectAnimationUsingKeyFrames. Quadros-chave como DiscreteObjectKeyFrame criam alterações repentinas em valores, ou seja, as mudanças de cor nesse exemplo ocorrerem de repente.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://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>

For the complete sample, see Exemplo de animação KeyFrame.

Consulte também

Tarefas

Exemplo de animação KeyFrame

Conceitos

Visão geral de animações de Quadro-Chave

Referência

ObjectAnimationUsingKeyFrames

Background

Page

DiscreteObjectKeyFrame

LinearGradientBrush

RadialGradientBrush

DrawingBrush

Outros recursos

Key-Frame Animation How-to Topics