Cómo: Animar un objeto mediante fotogramas clave
En este ejemplo se muestra cómo animar un objeto, que en este ejemplo es la propiedad Background de un control Page, mediante fotogramas clave.
Ejemplo
En el ejemplo siguiente se usa la clase ObjectAnimationUsingKeyFrames para animar los cambios de color para la propiedad Background de un control Page. La animación de ejemplo cambia a un pincel de fondo diferente a intervalos regulares. Esta animación usa la clase DiscreteObjectKeyFrame para crear tres fotogramas clave diferentes. La animación usa los fotogramas clave de la manera siguiente:
Al final del primer segundo, anima una instancia de la clase LinearGradientBrush. En esta sección del ejemplo se aplica un degradado lineal al color de fondo, de manera que el color pasa de amarillo a naranja y a rojo.
Al final del segundo siguiente, anima una instancia de la clase RadialGradientBrush. En esta sección del ejemplo se aplica un degradado radial al color de fondo, de manera que el color pasa de blanco a azul y a negro.
Al final del tercer segundo, anima una instancia de la clase DrawingBrush. En esta sección del ejemplo se aplica un modelo de tablero al fondo.
La animación comienza de nuevo y se repite indefinidamente.
Nota |
---|
DiscreteObjectKeyFrame es el único tipo de fotograma clave que se puede usar con la clase ObjectAnimationUsingKeyFrames.Los fotogramas clave como DiscreteObjectKeyFrame crean cambios repentinos en los valores, es decir, los cambios de color de este ejemplo se producen 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>
Para obtener el ejemplo completo, vea KeyFrame Animation Sample.
Vea también
Referencia
Conceptos
Información general sobre animaciones de fotogramas clave