Cómo: Animar el grosor de un borde mediante fotogramas clave

  • Artículo

En este ejemplo se muestra cómo animar la propiedad BorderThickness de Border.

Ejemplo

En el ejemplo siguiente se usa la clase ThicknessAnimationUsingKeyFrames para animar la propiedad BorderThickness de un Border. Esta animación utiliza tres fotogramas clave de la siguiente manera:

  1. Durante el primer medio segundo, utiliza una instancia de la clase LinearThicknessKeyFrame para aumentar gradualmente el grosor del borde. En el ejemplo se usa LinearThicknessKeyFrame para crear un aumento lineal suave entre valores.

  2. Al final del siguiente medio segundo, se usa una instancia de la clase DiscreteThicknessKeyFrame para aumentar repentinamente el grosor del borde. Los fotogramas clave discretos como los derivados de DiscreteThicknessKeyFrame crean saltos repentinos entre valores, es decir, el movimiento de la animación se entrecorta.

  3. Durante los últimos dos segundos, se usa una instancia de la clase SplineThicknessKeyFrame para disminuir el grosor del borde. Los fotogramas clave de spline como los derivados de SplineThicknessKeyFrame crean una transición variable entre valores según los valores de la propiedad KeySpline. En este fotograma clave, la animación se inicia lentamente y se va acelerando de forma exponencial hacia el final del segmento temporal.

<!-- This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border. -->
<Page  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.KeyFrameExamples.ThicknessAnimationUsingKeyFramesExample"
  Name="myRootElement"
  WindowTitle="ThicknessAnimationUsingKeyFrames Example">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="1"
    Margin="0,60,0,20" Padding="20"  >
      <Border.Triggers>
        <EventTrigger RoutedEvent="Border.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animating the BorderThickness property uses 3 KeyFrames. -->
              <ThicknessAnimationUsingKeyFrames
                Storyboard.TargetProperty="BorderThickness"
                Duration="0:0:5" FillBehavior="HoldEnd" RepeatBehavior="Forever">
                <ThicknessAnimationUsingKeyFrames.KeyFrames>

                  <!-- Using a LinearThicknessKeyFrame, thickness increases gradually
                  over the first half second of the animation. -->
                  <LinearThicknessKeyFrame KeyTime="0:0:0.5">
                    <LinearThicknessKeyFrame.Value>
                      <Thickness Left="8" Right="8" Top="6" Bottom="6" />
                    </LinearThicknessKeyFrame.Value>
                  </LinearThicknessKeyFrame>

                  <!-- Using a DiscreteThicknessKeyFrame, thickness increases suddenly
                  after the first second of the animation. -->
                  <DiscreteThicknessKeyFrame KeyTime="0:0:1">
                    <DiscreteThicknessKeyFrame.Value>
                      <Thickness Left="28" Right="28" Top="24" Bottom="24" />
                    </DiscreteThicknessKeyFrame.Value>
                  </DiscreteThicknessKeyFrame>

                  <!-- Using a SplineThicknessKeyFrame, thickness decreases slowly at first
                  and then suddenly contracts. This KeyFrame takes 2 seconds. -->
                  <SplineThicknessKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3">
                    <SplineThicknessKeyFrame.Value>
                      <Thickness Left="1" Right="1" Top="1" Bottom="8" />
                    </SplineThicknessKeyFrame.Value>
                  </SplineThicknessKeyFrame>

                </ThicknessAnimationUsingKeyFrames.KeyFrames>
              </ThicknessAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Border.Triggers>

      <TextBlock>
        This example shows how to use the ThicknessAnimationUsingKeyFrames to create
        an animation on the BorderThickness property of a Border. 
      </TextBlock>
    </Border>

  </StackPanel>
</Page>

Para consultar el ejemplo completo, vea Ejemplo de animación mediante fotogramas clave.

Vea también