Cómo: Animar los cambios de tamaño mediante fotogramas clave
En este ejemplo se muestra cómo animar los cambios del tamaño mediante fotogramas clave.
Ejemplo
En el ejemplo siguiente se usa la clase SizeAnimationUsingKeyFrames para animar la propiedad Size de ArcSegment. Esta animación usa tres fotogramas clave de la siguiente manera:
Durante el primer medio segundo de la animación, usa una instancia de la clase LinearSizeKeyFrame para aumentar gradualmente el tamaño del arco. Los fotogramas clave lineales como LinearSizeKeyFrame crean una transición lineal suave entre valores.
Al final del medio segundo siguiente, usa una instancia de la clase DiscreteSizeKeyFrame para aumentar el tamaño del arco repentinamente. Los fotogramas clave discretos como DiscreteSizeKeyFrame crean saltos súbitos entre los valores, es decir, los cambios de tamaño se producen de repente y no son sutiles.
Durante los dos últimos segundos, utiliza una instancia de la clase SplineSizeKeyFrame para aumentar el tamaño del arco. Los fotogramas clave spline como SplineSizeKeyFrame crean una transición variable entre los valores según los valores de la propiedad KeySpline. En este ejemplo, el tamaño del arco aumenta lentamente al principio y va aumentando exponencialmente a medida que se acerca el final del segmento temporal.
<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas HorizontalAlignment="Left" Margin="0" >
<!-- Create an arc on the screen that animates its size when it loads. -->
<Path Stroke="Black" StrokeThickness="2" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,200">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment x:Name="myArcSegment" Size="90,80"
SweepDirection="Clockwise" Point="500,200" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard Name="myBeginStoryBoard">
<Storyboard>
<!-- Animating the Size property uses 3 KeyFrames. -->
<SizeAnimationUsingKeyFrames
Storyboard.TargetName="myArcSegment"
Storyboard.TargetProperty="Size" >
<SizeAnimationUsingKeyFrames.KeyFrames>
<!-- Using a LinearSizeKeyFrame, the size of the arc increases
gradually over the first half second of the animation. -->
<LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />
<!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
after the first second of the animation. -->
<DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />
<!-- Using a SplineSizeKeyFrame, the Size increases slowly at first
and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
<SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />
</SizeAnimationUsingKeyFrames.KeyFrames>
</SizeAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>
Para obtener el ejemplo completo, vea KeyFrame Animation Sample.
Vea también
Referencia
Conceptos
Información general sobre animaciones de fotogramas clave