Cómo: Animar el grosor de un borde mediante fotogramas clave
En este ejemplo se muestra cómo animar la propiedad BorderThickness de Border.
Ejemplo
En el ejemplo siguiente, se utiliza la clase ThicknessAnimationUsingKeyFrames para animar la propiedad BorderThickness de Border. Esta animación utiliza tres fotogramas clave de la siguiente manera:
Durante el primer medio segundo, utiliza una instancia de la clase LinearThicknessKeyFrame para aumentar gradualmente el grosor del borde. En el ejemplo se utiliza LinearThicknessKeyFrame para crear un aumento lineal suavizado entre los valores.
Al final del medio segundo siguiente, utiliza una instancia de la clase DiscreteThicknessKeyFrame para aumentar de repente el grosor del borde. Los fotogramas clave discretos como los derivados de DiscreteThicknessKeyFrame crean saltos súbitos entre los valores, es decir, el movimiento de la animación es brusco.
Durante los dos últimos segundos, utiliza una instancia de la clase SplineThicknessKeyFrame para reducir el grosor del borde. Los fotogramas clave spline como los derivados de SplineThicknessKeyFrame crean una transición variable entre los 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 hasta 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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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 obtener el ejemplo completo, vea KeyFrame Animation Sample.
Vea también
Tareas
Cómo: Animar el valor del grosor de un borde
Referencia
Conceptos
Información general sobre animaciones de fotogramas clave