Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Este tema te introduce a las animaciones de fotogramas clave. Las animaciones de fotograma clave permiten animar con más de dos valores de destino y controlar el método de interpolación de una animación.
Prerrequisitos
Para comprender esta información general, debe estar familiarizado con las animaciones y escalas de tiempo de Windows Presentation Foundation (WPF). Para obtener una introducción a las animaciones, consulte Información general sobre animaciones. También ayuda a familiarizarse con las animaciones From/To/By. Para obtener más información, consulte la Visión general de las animaciones desde/hacia/por.
¿Qué es una animación Key-Frame?
Al 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 sobre su Duration. Sin embargo, aunque una animación From/To/By crea una transición entre dos valores, una animación de fotograma clave único 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 con las que establecer sus valores de destino. Los valores objetivo de una animación de cuadros clave se describen mediante objetos de cuadros clave (de ahí el término "animación de cuadros clave"). Para especificar los valores de destino de la animación, cree objetos de fotograma clave y agréguelos a la colección de la animación KeyFrames. Cuando se ejecuta la animación, realiza la transición entre los fotogramas especificados.
Además de admitir varios valores de destino, algunos métodos de fotograma clave incluso admiten varios métodos de interpolación. El método de interpolación de una animación define cómo realiza la transición de un valor al siguiente. Hay tres tipos de interpolaciones: discretas, lineales y con spline.
Para animar con una animación de fotograma clave, complete los pasos siguientes.
Declare la animación y especifique su Duration, igual que lo haría para una animación desde/hacia/por.
Para cada valor de destino, cree un fotograma clave del tipo adecuado, establezca su valor y KeyTime, y agréguelo a la colección de la animación KeyFrames.
Asocie la animación a una propiedad, igual que lo 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 mediante un guión gráfico, vea Información general sobre guiones gráficos.
En el siguiente ejemplo, se utiliza DoubleAnimationUsingKeyFrames para animar un elemento Rectangle hacia cuatro ubicaciones diferentes.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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>
Al igual que una animación de From/To/By, una animación de fotograma clave se puede aplicar a una propiedad usando un Storyboard en el marcado o mediante el método BeginAnimation en el código. También puede usar una animación de fotograma clave para crear y AnimationClock aplicarla a una o varias propiedades. Para obtener más información sobre los diferentes métodos para aplicar animaciones, consulte el Resumen de técnicas de animación de propiedades.
Tipos de animación de Key-Frame
Dado que las animaciones generan valores de propiedad, hay diferentes tipos de animación para diferentes tipos de propiedad. Para animar una propiedad que toma Double (como la propiedad de Width un elemento), se usa una animación que genera Double valores. Para animar una propiedad que toma un Point, se usa una animación que genera Point valores, y así sucesivamente.
Las clases de animación de fotograma clave pertenecen al System.Windows.Media.Animation espacio de nombres y cumplen la siguiente convención de nomenclatura:
<Tipo>AnimationUsingKeyFrames
Donde <Type> es el tipo de valor que la clase anima.
WPF proporciona las siguientes clases de animación de fotograma clave.
Valores de destino (fotogramas clave) y tiempos clave
Al igual que hay diferentes tipos de animaciones de fotograma clave para animar diferentes tipos de propiedades, también hay diferentes tipos de objetos de fotograma clave: uno para cada tipo de valor animado y método de interpolación admitidos. Los tipos de fotograma clave se adhieren a la siguiente convención de nomenclatura:
<InterpolationMethod><(tipo)>KeyFrame
Donde <InterpolationMethod> es el método de interpolación que usa el fotograma clave y <Type> es el tipo de valor que la clase anima. Una animación de fotograma clave que admita los tres métodos de interpolación tendrá tres tipos de fotogramas clave que puede usar. Por ejemplo, puede usar tres tipos de fotograma clave con DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame y SplineDoubleKeyFrame. (Los métodos de interpolación se describen en detalle en una sección posterior).
El propósito principal de un fotograma clave es especificar un KeyTime y un Value. Cada tipo de fotograma clave proporciona estas dos propiedades.
La Value propiedad especifica el valor de destino de ese fotograma clave.
La propiedad KeyTime especifica cuándo, dentro de la animación Duration, se alcanza un fotograma clave Value.
Cuando comienza una animación de fotograma clave, recorre en iteración sus fotogramas clave en el orden definido por sus KeyTime propiedades.
Si no hay ningún fotograma clave en el momento 0, la animación crea una transición entre el valor actual de la propiedad de destino y el Value del primer fotograma clave; de lo contrario, el valor de salida de la animación se convierte en el valor del primer fotograma clave.
La animación crea una transición entre el primer y el segundo fotograma clave mediante el método de interpolación especificado por el segundo fotograma clave. La transición comienza en el primer fotograma KeyTime clave y termina cuando se alcanza el segundo fotograma KeyTime clave.
La animación continúa, creando transiciones entre cada fotograma clave posterior y su fotograma clave anterior.
Por último, la animación pasa al valor del fotograma clave con el mayor tiempo clave que es igual o menor que el de la animación Duration.
Si la Duration de la animación es Automatic o su Duration es igual al tiempo del último fotograma clave, la animación finaliza. De lo contrario, si el Duration de la animación es mayor que el tiempo clave del último cuadro clave, la animación mantiene el valor del cuadro clave hasta que llega al final de su Duration. Al igual que todas las animaciones, una animación de fotograma clave usa su FillBehavior propiedad para determinar si contiene el valor final cuando llega al final de su período activo. Para obtener más información, consulte la Descripción general de los comportamientos temporales.
En el ejemplo siguiente se usa el DoubleAnimationUsingKeyFrames objeto definido en el ejemplo anterior para mostrar cómo funcionan las Value propiedades y KeyTime .
El primer fotograma clave establece inmediatamente el valor de salida de la animación en 0.
El segundo fotograma clave se anima desde 0 hasta 350. Se inicia después de que finalice el primer fotograma clave (en el tiempo = 0 segundos) y se reproduce durante 2 segundos, y termina en el tiempo = 0:00:02.
El tercer fotograma clave se anima de 350 a 50. Se inicia cuando finaliza el segundo fotograma clave (a los 2 segundos) y se reproduce durante 5 segundos, terminando a los 0:00:07.
El cuarto fotograma clave se anima desde 50 hasta 200. Se inicia cuando finaliza el tercer fotograma clave (en el momento = 7 segundos) y se reproduce durante 1 segundo, finalizando en el momento = 0:0:8.
Dado que la Duration propiedad de la animación se estableció en 10 segundos, la animación mantiene su valor final durante dos segundos hasta finalizar a tiempo = 0:0:10.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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
En las secciones anteriores se mencionó 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 cambia entre los valores durante su duración. Al seleccionar el tipo de fotograma clave que usa con la animación, puede definir el método de interpolación para ese segmento de fotograma clave. Hay tres tipos diferentes de métodos de interpolación: lineal, discreto y de splines.
Interpolación lineal
Con la interpolación lineal, la animación avanza a una velocidad constante de la duración del segmento. Por ejemplo, si un segmento de fotograma clave pasa de 0 a 10 durante una duración de 5 segundos, la animación generará los siguientes valores en los momentos 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 durante una duración de 5 segundos, la animación generará los siguientes valores en los momentos 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 final de la duración del segmento.
La interpolación spline es más compleja. Se describe en la sección siguiente.
Interpolación con spline
La interpolación spline se puede usar para lograr efectos de control de tiempo más realistas. Dado que las animaciones se usan con tanta frecuencia para imitar los efectos que se producen en el mundo real, es posible que los desarrolladores necesiten un control fino de la aceleración y la desaceleración de los objetos y la manipulación cercana de los segmentos de tiempo. Los fotogramas clave spline permiten animar con interpolación de spline. Con otros fotogramas clave, usted especifica un Value y un KeyTime. Con un marco clave spline, también se especifica un KeySpline. En el ejemplo siguiente se muestra un único fotograma clave spline para DoubleAnimationUsingKeyFrames. Observe la KeySpline propiedad ; es lo que hace que un fotograma clave spline sea diferente de los otros tipos de fotogramas clave.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Una curva Bezier cúbica se define mediante un punto de inicio, un punto final y dos puntos de control. La KeySpline propiedad de un marco clave de spline define los dos puntos de control de una curva Bézier que se extiende de (0,0) a (1,1). El primer punto de control controla el factor de curva de la primera mitad de la curva Bezier y el segundo punto de control controla el factor de curva de la segunda mitad del segmento Bezier. La curva resultante describe la velocidad de cambio de ese fotograma clave spline. Cuanto más empinada la curva, más rápido cambia el fotograma clave sus valores. A medida que la curva se aplana, el fotograma clave cambia sus valores más lentamente.
Puedes usar KeySpline para simular trayectorias físicas como la caída de agua o el rebote de bolas, o aplicar otros efectos de "suavizado" y "suavizado" a las animaciones de movimiento. En el caso de los efectos de interacción del usuario, como los fundidos de fondo o el rebote del botón de control, es posible que apliques la interpolación de splines para modificar la velocidad de cambio de una animación de manera específica.
En el ejemplo siguiente se especifica un KeySpline de 0,1 1 0, que crea la siguiente curva Bezier.
Una
Una spline clave con puntos de control (0,0, 1,0) y (1,0, 0,0)
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Este fotograma clave anima rápidamente cuando comienza, se ralentiza y, a continuación, se acelera de nuevo antes de que finalice.
En el ejemplo siguiente se especifica un KeySpline de 0,5,0,25 0,75,1.0, que crea la siguiente curva Bezier.
Una spline clave con puntos de control (0,25, 0,5) y (0,75, 1,0)
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Dado que la curvatura de la curva Bezier cambia muy poco, este fotograma clave anima a una velocidad casi constante; se ralentiza un poco hacia su fin.
En el ejemplo siguiente se usa para DoubleAnimationUsingKeyFrames animar la posición del rectángulo. Dado que DoubleAnimationUsingKeyFrames usa objetos SplineDoubleKeyFrame, la transición entre cada valor de fotograma clave utiliza interpolación de 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 de splines puede ser difícil de entender; experimentar con diferentes ajustes puede ayudar. El Ejemplo de Animación de Spline Clave permite cambiar los valores de spline clave y ver el resultado que tiene en la animación.
Combinación de métodos de interpolación
Puede usar fotogramas clave con diferentes tipos de interpolación en una sola animación de fotograma clave. Cuando dos animaciones de fotograma clave con interpolaciones diferentes se siguen entre sí, el método de interpolación del segundo fotograma clave se usa para crear la transición desde el primer valor al segundo.
En el ejemplo siguiente, se crea un DoubleAnimationUsingKeyFrames que usa 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 momentos clave
Al igual que otras animaciones, las animaciones de fotograma clave tienen una propiedad Duration. Además de especificar la animación Duration, tiene que especificar qué parte de esa duración se asigna a cada fotograma clave. Para ello, describa un KeyTime para cada uno de los fotogramas clave de la animación. Cada fotograma clave KeyTime especifica cuándo finaliza.
La KeyTime propiedad no especifica cuánto tiempo dura el tiempo clave. La cantidad de tiempo que se reproduce un fotograma clave se determina cuando finaliza el fotograma clave, cuando finaliza el fotograma clave anterior y la duración de la animación. Los tiempos clave se pueden especificar como un valor de hora, un porcentaje o como los valores especiales Uniform o Paced.
En la lista siguiente se describen las distintas formas de especificar los momentos clave.
Valores de TimeSpan
Usted puede usar los valores TimeSpan para especificar un KeyTime. El valor debe ser mayor o igual que 0 y menor o igual que la duración de la animación. En el ejemplo siguiente se muestra una animación con una duración de 10 segundos y cuatro fotogramas clave con tiempos clave especificados como valores temporales.
El primer fotograma clave anima desde el valor base hasta 100 en los primeros 3 segundos, finalizando a las 0:0:03.
El segundo fotograma clave se anima de 100 a 200. Se inicia después de que finalice el primer fotograma clave (en el momento = 3 segundos) y se reproduce durante 5 segundos, finalizando en el momento = 0:0:8.
El tercer fotograma clave se anima de 200 a 500. Se inicia cuando finaliza el segundo fotograma clave (en el momento = 8 segundos) y se reproduce durante 1 segundo, finalizando en el momento = 0:0:9.
El cuarto fotograma clave anima de 500 a 600. Se inicia cuando finaliza el tercer fotograma clave (en el momento = 9 segundos) y se reproduce durante 1 segundo, finalizando en el momento = 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 termina en un determinado porcentaje de la animación Duration. En XAML, especificas el porcentaje como un número seguido del % símbolo. En el código, se usa el FromPercent método y se pasa un Double que indica el porcentaje. El valor debe ser mayor o igual que 0 y menor o igual que el 100 %. En el ejemplo siguiente se 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 anima desde el valor base a 100 durante los primeros 3 segundos, finalizando en el momento = 0:0:3.
El segundo fotograma clave se anima de 100 a 200. Se inicia después de que finalice el primer fotograma clave (en el momento = 3 segundos) y se reproduce durante 5 segundos, finalizando en el momento = 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 momento = 8 segundos) y se reproduce durante 1 segundo, finalizando en el momento = 0:0:9 (0,9 * 10 = 9).
El cuarto fotograma clave 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 momento = 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, Uniforme
Utilice Uniform el temporizador cuando desee que cada fotograma clave dure la misma cantidad de tiempo.
Un Uniform momento clave divide el tiempo igualamente por el número de fotogramas clave para determinar el momento de finalización de cada fotograma clave. En el ejemplo siguiente se muestra una animación con una duración de 10 segundos y cuatro fotogramas clave cuyos tiempos de clave se especifican como Uniform.
El primer fotograma clave se anima desde el valor base a 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 después de que finalice el primer fotograma clave (en el momento = 2,5 segundos) y se reproduce durante aproximadamente 2,5 segundos, finalizando en el momento = 0:0:5.
El tercer fotograma clave se anima de 200 a 500. Se inicia cuando finaliza el segundo fotograma clave (en el momento = 5 segundos) y se reproduce durante 2,5 segundos, finalizando en el momento = 0:00:07,5.
El cuarto fotograma clave anima de 500 a 600. Se inicia cuando finaliza el segundo fotograma clave (en el momento = 7,5 segundos) y se reproduce durante 2,5 segundos, finalizando en el momento = 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, Ritmo
Usa Paced la temporización cuando quieras animar a una velocidad constante.
Un Paced tiempo clave asigna el tiempo disponible según la duración de cada uno de los marcos clave para determinar la duración de cada marco. Asegurará que el comportamiento de la animación, ya sea su velocidad o ritmo, se mantengan constantes. En el ejemplo siguiente se 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 la hora de clave del último fotograma clave es Paced o Uniform, su hora de clave resuelta se establecerá en el 100 %. Si el primer fotograma clave de una animación multiframe se marca al ritmo, su tiempo de clave resuelto se establecerá en 0. (Si la colección de fotogramas clave contiene únicamente un fotograma clave y es un fotograma clave ritmado, su tiempo de fotograma clave resuelto será establecido en un 100 por ciento).
Los distintos fotogramas clave dentro de una sola animación de fotograma clave pueden usar diferentes tipos de tiempo clave.
Combinación de tiempos clave, fotogramas clave de salidaOf-Order
Puede usar fotogramas clave con diferentes KeyTime tipos de valor en la misma animación. Y, aunque se recomienda agregar fotogramas clave en el orden en que deben reproducirse, no es necesario. El sistema de animación y de temporización es capaz de resolver fotogramas clave desordenados. Se omiten los fotogramas clave con tiempos de clave no válidos.
En la lista siguiente se describe el procedimiento por el que se resuelven los tiempos clave para los fotogramas clave de una animación de fotograma clave.
Determine el tiempo total de interpolación de la animación, el tiempo total que tarda la animación de fotograma clave en completar una iteración hacia delante.
Si la animación Duration 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 más grande TimeSpanKeyTime especificado entre sus fotogramas clave, si existe alguno.
De lo contrario, el tiempo de interpolación total es de 1 segundo.
Use el valor total de tiempo de interpolación para resolver PercentKeyTime los valores.
Resuelva el último fotograma clave, si aún no se resolvió en los pasos anteriores. Si el KeyTime del último fotograma clave es Uniform o Paced, su tiempo resuelto será igual al tiempo total de interpolación.
Si el KeyTime del primer fotograma clave es Paced y esta animación tiene más de un fotograma clave, resuelve su valor KeyTime a cero; si solo hay un fotograma clave y su KeyTime valor es Paced, se resuelve al tiempo total de interpolación, como se describe en el paso anterior.
Resuelva los valores restantes UniformKeyTime: a cada uno se le asigna una parte igual del tiempo disponible. Durante este proceso, los valores sin resolver PacedKeyTime se tratan temporalmente como UniformKeyTime valores y obtienen un tiempo resuelto temporal.
Resuelva los KeyTime valores de los fotogramas clave sin tiempos clave especificados usando los fotogramas clave más cercanos que tengan valores resueltos KeyTime.
Resuelva los valores restantes PacedKeyTime . Paced KeyTime utilicen los KeyTime valores de los fotogramas clave vecinos para determinar el tiempo resultante. El objetivo es garantizar que la velocidad de la animación sea constante alrededor del tiempo de resolución de este fotograma clave.
Ordene los fotogramas clave en orden de tiempo resuelto (clave principal) y orden de declaración (clave secundaria), es decir, use una ordenación estable basada en los valores de fotograma KeyTime clave resueltos.
Consulte también
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
.NET Desktop feedback