Información general sobre animaciones de fotogramas clave
Actualización: noviembre 2007
En este tema se presenta la animación de fotogramas clave. La animación de fotogramas clave permite animar utilizando más de dos valores objetivo y controlar el método de interpolación de una animación.
Este tema contiene las secciones siguientes.
Requisitos previos
Utilizar animaciones de fotogramas clave
Temas relacionados
Requisitos previos
Para comprender esta información general, debe conocer las animaciones y las escalas de tiempo de Windows Presentation Foundation (WPF). Para ver una introducción a las animaciones, vea Información general sobre animaciones. También es útil conocer las animaciones From/To/By. Para obtener más información, vea Información general sobre animaciones From/To/By.
¿Qué es una animación de fotograma clave?
Igual que una animación From/To/By, una animación de fotograma clave anima el valor de una propiedad de destino. Crea una transición entre sus valores de destino a lo largo de su valor de Duration. Sin embargo, mientras una animación From/To/By crea una transición entre dos valores, una animación de fotograma clave única puede crear transiciones entre cualquier número de valores de destino. A diferencia de una animación From/To/By, una animación de fotograma clave no tiene propiedades From, To o By que permitan establecer sus valores de destino. Los valores de destino de una animación de fotograma clave se describen utilizando objetos de fotograma (de ahí el término "animación de fotograma clave"). Para especificar los valores de destino de la animación, cree objetos de fotograma clave y agréguelos a la colección KeyFrames de la animación. Cuando se ejecute la animación, realizará transiciones entre los fotogramas especificados.
Además de admitir varios valores de destino, algunos métodos de fotograma clave admiten incluso varios métodos de interpolación. Un método de interpolación de animación define cómo se realizan las transiciones de un valor al siguiente. Hay tres tipos de interpolaciones: discretas, lineales y spline.
Para animar con una animación de fotograma clave, complete los pasos siguientes.
Declare la animación y especifique su propiedad Duration, igual que haría para una animación From/To/By.
Para cada valor de destino, cree un fotograma clave del tipo adecuado, establezca su valor y su propiedad KeyTimey agréguelo a la colección KeyFrames de la animación.
Asocie la animación a una propiedad, igual que haría con una animación From/To/By. Para obtener más información sobre cómo aplicar una animación a una propiedad utilizando un guión gráfico, vea Información general sobre objetos Storyboard.
El ejemplo siguiente utiliza DoubleAnimationUsingKeyFrames para animar un elemento Rectangle en cuatro ubicaciones diferentes.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Como una animación From/To/By, una animación de fotograma clave puede aplicarse a una propiedad usando un objeto Storyboard en el marcado y en el código o utilizando el método BeginAnimation en el código. También puede usar una animación de fotograma clave para crear una clase AnimationClock y aplicarla a una o más propiedades. Para obtener más información sobre los distintos métodos para aplicar animaciones, vea Información general sobre técnicas de animación de propiedades.
Tipos de animación de fotograma clave
Dado que las animaciones generan valores de propiedades, hay distintos tipos de animaciones para los diversos tipos de propiedades. Para animar una propiedad que acepta una estructura Double (tal como la propiedad Width de un elemento), se usa una animación que genera valores Double. Para animar una propiedad que acepta una estructura Point, se usa una animación que genera valores Point, y así sucesivamente.
Las clases de animaciones de fotograma clave pertenecen al espacio de nombres System.Windows.Media.Animation y se adhieren a la convención de nomenclatura siguiente:
*<Tipo>*AnimationUsingKeyFrames
Donde <Tipo> es el tipo de valor que la clase anima.
WPF proporciona las clases de animación de fotograma clave siguientes.
Tipo de propiedad |
Clase de animaciones From/To/By correspondiente |
Los métodos de interpolación admitidos |
|---|---|---|
Discreta |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta |
||
Discreta |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
||
Discreta, lineal, spline |
Valores de destino (fotogramas clave) y tiempos clave
Así como hay diferentes tipos de animaciones de fotograma clave para animar diferentes tipos de propiedad, hay también diferentes tipos de objetos de fotograma clave: uno para cada tipo de valor animado y de método de interpolación admitido. Los tipos de fotograma clave se adhieren a la convención de nomenclatura siguiente:
*<MétodoDeInterpolación><Tipo>*KeyFrame
Donde <MétodoDeInterpolación> es el método de interpolación que utiliza el fotograma clave y <Tipo> es el tipo de valor que anima la clase. Una animación de fotograma clave que admita los tres métodos de interpolación tendrá tres tipos de fotograma clave que puede utilizar. Por ejemplo, puede utilizar tres tipos de fotograma clave con un objeto DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame y SplineDoubleKeyFrame. (Los métodos de interpolación se describen con detalle en una sección posterior.)
El propósito principal de un fotograma clave es especificar un valor de KeyTime y Value. Cada tipo de fotograma clave proporciona estas dos propiedades.
La propiedad Value especifica el valor de destino para ese fotograma clave.
La propiedad KeyTime especifica cuándo se alcanza (dentro del valor de Duration de la animación) el valor de Value de un fotograma clave.
Cuando se inicia la animación de un fotograma clave, recorre en iteración sus fotogramas clave en el orden definido por sus propiedades KeyTime.
Si no hay ningún fotograma clave en el tiempo 0, la animación crea una transición entre el valor actual de la propiedad de destino y el valor Value del primer fotograma clave; de lo contrario, el valor de salida de animación es el valor del primer fotograma clave.
La animación crea una transición entre el valor Value del primer y el segundo fotograma clave utilizando el método de interpolación especificado por el segundo fotograma clave. La transición se inicia en el valor KeyTime del primer fotograma clave y termina cuando se alcanza el valor KeyTime del segundo fotograma clave.
La animación continúa, creando transiciones entre cada fotograma clave subsiguiente y su fotograma clave anterior.
Finalmente, a animación realiza una transición al valor del fotograma clave con el mayor tiempo clave igual o menor que el valor de Duration de la animación.
Si el valor de Duration de la animación es Automatic o su valor de Duration es igual al tiempo del último fotograma clave, la animación finaliza. De lo contrario, si el valor Duration de la animación es mayor que el tiempo clave del último fotograma clave, la animación retiene el valor del fotograma clave hasta que alcanza el final de su valor de Duration. Como todas las animaciones, una animación de fotograma clave utiliza su propiedad FillBehavior para determinar si retiene el valor final cuando llega al fin de su período activo. Para obtener más información, vea Información general sobre comportamientos de control de tiempo.
El ejemplo siguiente utiliza el objeto DoubleAnimationUsingKeyFrames definido en el ejemplo anterior para mostrar cómo funcionan las propiedades Value y KeyTime.
El primer fotograma clave establece inmediatamente el valor de salida de la animación en 0.
El segundo fotograma clave se anima de 0 a 350. Se inicia una vez que termina el primer fotograma clave (en el tiempo = 0 segundos) y se reproduce durante 2 segundos, finalizando en el tiempo = 0:0:2.
El tercer fotograma clave se anima de 350 a 50. Se inicia cuando finaliza el segundo fotograma clave (en el tiempo = 2 segundos) y se reproduce durante 5 segundos, finalizando en el tiempo = 0:0:7.
El cuarto fotograma clave se anima de 50 a 200. Se inicia cuando finaliza el tercer fotograma clave (en el tiempo = 7 segundos) y se reproduce durante 1 segundo, finalizando en el tiempo = 0:0:8.
Dado que la propiedad Duration de la animación se estableció en 10 segundos, la animación retiene su valor final durante dos segundos antes de finalizar en el tiempo = 0:0:10.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Métodos de interpolación
Las secciones anteriores mencionaban que algunas animaciones de fotograma clave admiten varios métodos de interpolación. La interpolación de una animación describe cómo una animación realiza transiciones entre valores a lo largo de su duración. Seleccionando qué tipo de fotograma clave se utiliza con la animación, puede definir el método de interpolación para ese segmento del fotograma clave. Hay tres tipos diferentes de métodos de interpolación: lineal, discreto y spline.
Interpolación lineal
Con la interpolación lineal, la animación progresa en una velocidad constante en la duración del segmento. Por ejemplo, si un segmento de fotograma clave pasa de 0 a 10 en una duración de 5 segundos, la animación generará los valores siguientes en los tiempos especificados:
Tiempo |
Valor de salida |
|---|---|
0 |
0 |
1 |
2 |
2 |
4 |
3 |
6 |
4 |
8 |
4.25 |
8.5 |
4.5 |
9 |
5 |
10 |
Interpolación discreta
Con la interpolación discreta, la función de animación salta de un valor al siguiente sin interpolación. Si un segmento de fotograma clave pasa de 0 a 10 en una duración de 5 segundos, la animación generará los valores siguientes en los tiempos especificados:
Tiempo |
Valor de salida |
|---|---|
0 |
0 |
1 |
0 |
2 |
0 |
3 |
0 |
4 |
0 |
4.25 |
0 |
4.5 |
0 |
5 |
10 |
Observe cómo la animación no cambia su valor de salida hasta el mismo fin de la duración del segmento.
La interpolación spline es más compleja. Se describe en la siguiente sección.
Interpolación spline
La interpolación spline se puede utilizar para lograr efectos del control de tiempo más realistas. Dado que las animaciones se utilizan muy frecuentemente para imitar efectos que se producen en el mundo real, los programadores pueden necesitar un control preciso de la aceleración y la desaceleración de los objetos, así como una manipulación estrecha de los segmentos de tiempo. Los fotogramas clave de spline permiten animar con interpolación spline. Con otros fotogramas clave, se debe especificar valores Value y KeyTime. Con un fotograma clave de spline, también se especifica un valor KeySpline. En el ejemplo siguiente se muestra un fotograma clave de spline único para un objeto DoubleAnimationUsingKeyFrames. Observe la propiedad KeySpline; es lo que hace que un fotograma clave de spline sea diferente de los demás tipos de fotograma clave.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Una curva de Bézier cúbica se define mediante un punto inicial, un punto final y dos puntos de control. La propiedad KeySpline de un fotograma clave de spline define los dos puntos de control de una curva de Bezier que se extiende de (0,0) a (1,1). El primer punto de control controla el factor de curvatura de la primera mitad de la curva de Bézier, y el segundo punto de control controla el factor de curvatura de la segunda mitad del segmento de Bézier. La curva resultante describe la tasa de cambio para ese fotograma clave de spline. Cuanto más inclinada sea la curva, más rápidamente cambia de valor el fotograma clave. Cuando la curva se hace más plana, el fotograma clave cambia de valor más lentamente.
Podría utilizar KeySpline para simular trayectorias físicas como las del agua al caer o de bolas que rebotan, o aplicar otros efectos de amortiguación de entrada y salida a animaciones de movimiento. Para efectos de interacción con el usuario tales como fundidos de fondo o rebote de botones de control, quizá deba aplicar la interpolación spline para acelerar o ralentizar la velocidad de cambio de la animación de una manera concreta.
El ejemplo siguiente especifica un valor KeySpline de 0,1 1,0, que crea la curva Bézier siguiente.
Un spline clave con puntos de control (0,0; 1,0) y (1,0; 0,0)
.png "Curva Bézier")
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Este fotograma clave se anima rápidamente al principio, reduce la velocidad y, a continuación, se acelera de nuevo antes de finalizar.
El ejemplo siguiente especifica un valor KeySpline de 0.5,0.25 0.75,1.0, que crea la curva Bézier siguiente.
Un spline clave con puntos de control (0,25; 0,5) y (0,75; 1,0)
.png "Curva Bézier")
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Dado que la curvatura de la curva Bézier cambia muy poco, este fotograma clave se anima a una velocidad casi constante; reduce la velocidad un poco hacia su fin.
En el ejemplo siguiente se usa un objeto DoubleAnimationUsingKeyFrames para animar la posición de un rectángulo. Dado que DoubleAnimationUsingKeyFrames utiliza objetos SplineDoubleKeyFrame, la transición entre los valores del fotograma clave utiliza la interpolación spline.
<!-- This rectangle is animated using a key frame animation
with splined interpolation. -->
<Rectangle
Width="50"
Height="50"
Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="SplineAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="SplineAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:10" KeySpline="0.0,0.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
La interpolación spline puede ser difícil entender; puede ser útil experimentar con diferentes valores. Ejemplo Key Spline Animation permite cambiar valores de spline clave y ver el resultado que tienen sobre una animación.
Combinar métodos de interpolación
Puede utilizar fotogramas clave con diferentes tipos de interpolación en una única animación de fotograma de clave. Cuando dos animaciones de fotograma clave con diferentes interpolaciones se siguen entre sí, el método de interpolación del segundo fotograma clave se utiliza para crear la transición desde el primer valor al segundo.
En el ejemplo siguiente, se crea un objeto DoubleAnimationUsingKeyFrames que utiliza interpolación lineal, spline y discreta.
<!-- This rectangle is animated using a key frame animation
with a combination of interpolation methods. -->
<Rectangle
Width="50"
Height="50"
Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="ComboAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ComboAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"
KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Más sobre la duración y los tiempos clave
Como sucede con las demás animaciones, las animaciones de fotogramas clave tienen una propiedad Duration. Además de especificar el valor de Duration de la animación, debe especificar qué parte de esa duración se asigna a cada fotograma clave. Para hacerlo, describa un valor KeyTime para cada uno de los fotogramas clave de la animación. El valor de KeyTime de cada fotograma clave especifica cuándo finaliza ese fotograma.
La propiedad KeyTime no especifica cuánto tiempo se reproduce el tiempo clave. La duración de la reproducción del fotograma clave la determinan el momento de finalización del fotograma, el momento de finalización del fotograma anterior y la duración de la animación. Es posible especificar tiempos clave en forma de un valor de tiempo, un porcentaje o como los valores especiales Uniform o Paced.
La lista siguiente describe las diferentes maneras de especificar tiempos clave.
Valores TimeSpan
Puede utilizar valores TimeSpan para especificar un valor de KeyTime. El valor debe ser mayor o igual a 0, y menor o igual a la duración de la animación. El ejemplo siguiente muestra una animación con una duración de 10 segundos y cuatro fotogramas clave cuyos tiempos clave se especifican como valores de tiempo.
El primer fotograma clave se anima desde el valor base hasta 100 durante los primeros 3 segundos, finalizando en el tiempo = 0:0:03.
El segundo fotograma clave se anima de 100 a 200. Se inicia una vez que termina el primer fotograma clave (en el tiempo = 3 segundos) y se reproduce durante 5 segundos, finalizando en el tiempo = 0:0:8.
El tercer fotograma clave se anima de 200 a 500. Se inicia cuando finaliza el segundo fotograma clave (en el tiempo = 8 segundos) y se reproduce durante 1 segundo, finalizando en el tiempo = 0:0:9.
El cuarto fotograma clave se anima de 500 a 600. Se inicia cuando finaliza el tercer fotograma clave (en el tiempo = 9 segundos) y se reproduce durante 1 segundo, finalizando en el tiempo = 0:0:10.
<!-- This rectangle is animated with KeyTimes using TimeSpan values.
Goes to 100 in the first 3 seconds, 100 to 200 in
the next 5 seconds, 300 to 500 in the next second,
and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform01"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
<LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Valores de porcentaje
Un valor de porcentaje especifica que el fotograma clave finaliza en algún porcentaje del valor de Duration de la animación. En XAML, debe especificar el porcentaje como un número seguido por el símbolo %. En código, utilice el método FromPercent y pásele un valor Double que indique el porcentaje. El valor debe ser igual o mayor que 0 e igual o menor que el 100 por ciento. El ejemplo siguiente muestra una animación con una duración de 10 segundos y cuatro fotogramas clave cuyos tiempos clave se especifican como porcentajes.
El primer fotograma clave se anima desde el valor base hasta 100 durante los primeros 3 segundos, finalizando en el tiempo = 0:0:3.
El segundo fotograma clave se anima de 100 a 200. Se inicia una vez que termina el primer fotograma clave (en el tiempo = 3 segundos) y se reproduce durante 5 segundos, finalizando en el tiempo = 0:0:8 (0.8 * 10 = 8).
El tercer fotograma clave se anima de 200 a 500. Se inicia cuando finaliza el segundo fotograma clave (en el tiempo = 8 segundos) y se reproduce durante 1 segundo, finalizando en el tiempo = 0:0:9 (0.9 * 10 = 9).
El cuarto fotograma clave se anima de 500 a 600. Se inicia cuando finaliza el tercer fotograma clave (en el tiempo = 9 segundos) y se reproduce durante 1 segundo, finalizando en el tiempo = 0:0:10 (1 * 10 = 10).
<!-- Identical animation behavior to the previous rectangle
but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform02"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as Percentages. -->
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="200" KeyTime="80%" />
<LinearDoubleKeyFrame Value="500" KeyTime="90%" />
<LinearDoubleKeyFrame Value="600" KeyTime="100%" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Valor especial, Uniform
Utilice el control de tiempo Uniform cuando desee que cada fotograma clave tome la misma cantidad de tiempo.
Un tiempo clave Uniform divide el tiempo disponible por igual entre el número de fotogramas clave para determinar la hora de finalización de cada fotograma clave. El ejemplo siguiente muestra una animación con una duración de 10 segundos y cuatro fotogramas clave cuyos tiempos clave se especifican como Uniform.
El primer fotograma clave se anima desde el valor base hasta 100 durante los primeros 2,5 segundos, finalizando en el tiempo = 0:0:2,5.
El segundo fotograma clave se anima de 100 a 200. Se inicia una vez que termina el primer fotograma clave (en el tiempo = 2,5 segundos) y se reproduce durante aproximadamente 2,5 segundos, finalizando en el tiempo = 0:0:5.
El tercer fotograma clave se anima de 200 a 500. Se inicia cuando finaliza el segundo fotograma clave (en el tiempo = 5 segundos) y se reproduce durante 2.5 segundos, finalizando en el tiempo = 0:0:7.5.
El cuarto fotograma clave se anima de 500 a 600. Se inicia cuando finaliza el segundo fotograma clave (en el tiempo = 7,5 segundos) y se reproduce durante 2,5 segundos, finalizando en el tiempo = 0:0:1.
<!-- This rectangle is animated with KeyTimes using Uniform values. -->
<Rectangle Height="50" Width="50" Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform03"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Uniform.
When a key time is set to "Uniform" the total allotted
time of the animation is divided evenly between key frames.
In this example, the total duration of the animation is
ten seconds and there are four key frames each of which
are set to "Uniform", therefore, the duration of each key frame
is 3.3 seconds (10/3). -->
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Valor especial, Paced
Utilice el control de tiempo Paced cuando desee animar a una velocidad constante.
Un tiempo clave Paced asigna el tiempo disponible en función de la longitud de los fotogramas clave para determinar la duración de cada fotograma. De esta forma, se proporciona el comportamiento para que la "velocidad" o la reproducción de la animación se mantengan constantes. El ejemplo siguiente muestra una animación con una duración de 10 segundos y tres fotogramas clave cuyos tiempos clave se especifican como Paced.
<!-- Using Paced Values. Rectangle moves between key frames at
uniform rate except for first key frame
because using a Paced value on the first KeyFrame in a
collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform04"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Paced.
Paced values are used when a constant rate is desired.
The time allocated to a key frame with a KeyTime of "Paced"
is determined by the time allocated to the other key
frames of the animation. This time is calculated to
attempt to give a "paced" or "constant velocity"
for the animation. -->
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Tenga en cuenta que, si el tiempo clave del último fotograma clave es Paced o Uniform, su tiempo de clave resuelto se establecerá en el 100 por cien. Si el primer fotograma clave de una animación de varios fotogramas es paced, su tiempo clave resuelto se establecerá en 0. (Si la colección de fotogramas clave contiene solamente un fotograma de clave única y es un fotograma de clave paced, su tiempo clave resuelto se establecerá en el 100 por ciento.)
Diferentes fotogramas dentro de una única animación de fotograma clave pueden utilizar diferentes tipos de tiempo clave.
Combinar tiempos clave y fotogramas clave fuera de secuencia
Puede utilizar fotogramas clave con diferentes tipos de valor KeyTime en la misma animación. Y, aunque se recomienda agregar los fotogramas clave en el orden en el que se deben reproducir, no es necesario. El sistema de animación y control de tiempo es capaz de resolver fotogramas clave fuera de secuencia. Los fotogramas clave con tiempos clave no válidos se omiten.
La lista siguiente describe el procedimiento por el que se resuelven los tiempos clave para los fotogramas clave de una animación de fotogramas clave.
Determine el tiempo de interpolación total de la animación, el tiempo total que tarda la animación de fotogramas clave en completar una iteración hacia adelante.
Si el valor de Duration de la animación no es Automatic o Forever, el tiempo de interpolación total es el valor de la propiedad Duration de la animación.
De lo contrario, el tiempo de interpolación total es el valor TimeSpanKeyTime mayor especificado entre sus fotogramas clave, si existe alguno.
De lo contrario, el tiempo de interpolación total es 1 segundo.
Utilice el valor de tiempo de interpolación total para resolver valores PercentKeyTime.
Resuelva el último fotograma clave, si no se resolvió ya en los pasos anteriores. Si el valor KeyTime del último fotograma clave es Uniform o Paced, su tiempo resuelto será igual al tiempo de interpolación total.
Si el valor KeyTime del primer fotograma clave es Paced y esta animación tiene más de un fotograma clave, resuelva su valor KeyTime en cero; si solamente hay un fotograma clave y su valor KeyTime es Paced, se resuelve en el tiempo de interpolación total, como se describe en el paso anterior.
Resuelva los restantes valores UniformKeyTime: cada uno recibe una cuota igual del tiempo disponible. Durante este proceso, los valores PacedKeyTime no resueltos se tratan temporalmente como valores UniformKeyTimey obtienen un tiempo resuelto temporal.
Resuelva los valores KeyTime de los fotogramas clave con tiempo clave no especificados utilizando los fotogramas clave declarados más cercanos que tengan valores KeyTime resueltos.
Resuelva los restantes valores PacedKeyTime. PacedKeyTime utilizan los valores KeyTime de los fotogramas clave vecinos para determinar su tiempo resuelto. El objetivo es asegurarse de que la velocidad de la animación sea constante alrededor del tiempo resuelto de este fotograma clave.
Ordene los fotogramas clave por tiempo resuelto (clave primaria) y orden de declaración (clave secundaria), es decir, utilice un orden estable basado en los valores KeyTime resueltos de los fotogramas clave.
Vea también
Tareas
Conceptos
Información general sobre animaciones
Información general sobre objetos Storyboard
Información general sobre comportamientos de control de tiempo