Introducción al guión gráfico
Esta introducción se centra en cómo se usan las transiciones y los guiones gráficos en la animación de Windows. Para obtener información general sobre los componentes de la animación de Windows, consulta Información general sobre la animación de Windows.
Este tema contiene las siguientes secciones:
Transiciones
Una transición define cómo cambia una sola variable de animación durante un intervalo de tiempo determinado. La animación de Windows incluye una biblioteca de transiciones comunes que los desarrolladores pueden aplicar a una o varias variables de animación. Diferentes tipos de transiciones tienen diferentes conjuntos de parámetros, que pueden incluir el valor de la variable cuando se completa la transición, la duración de la transición o cantidades únicas de la función matemática subyacente, como la aceleración o el intervalo de oscilación.
Todas las transiciones comparten dos parámetros implícitos: el valor inicial y la velocidad inicial (pendiente) de la función matemática. La aplicación puede especificarlos explícitamente, pero el administrador de animaciones suele establecerlos en el valor y la velocidad de la variable de animación cuando comienza la transición.
Biblioteca de transición
La biblioteca de transiciones proporciona actualmente las siguientes transiciones. Si una aplicación requiere un efecto que no se puede especificar mediante la biblioteca de transición, los desarrolladores pueden crear otros tipos de transiciones implementando un interpolador personalizado para la aplicación o usando una biblioteca de transición de un tercero.
| Nombre de transición | Descripción |
|---|---|
| accelerate-decelerate |
La variable de animación se acelera y luego se ralentiza durante una duración determinada. |
| constant |
La variable de animación permanece en su valor inicial a lo largo de la transición. |
| cúbicas |
La variable de animación cambia de su valor inicial a un valor final especificado, con una velocidad final especificada, durante una duración determinada. |
| Discreta |
La variable de animación permanece en su valor inicial para un tiempo de retraso especificado y, a continuación, cambia instantáneamente a un valor final especificado y permanece en ese valor para un tiempo de suspensión determinado. |
| Instantánea |
La variable de animación cambia al instante de su valor actual a un valor final especificado. |
| linear |
La variable de animación pasa linealmente de su valor inicial a un valor final especificado durante una duración determinada. |
| lineal a partir de la velocidad |
La variable de animación pasa linealmente de su valor inicial a un valor final especificado con una velocidad especificada. |
| parabólica a partir de la aceleración |
La variable de animación pasa de su valor inicial a un valor final especificado, con una velocidad final especificada, cambiando su velocidad con una aceleración especificada. |
| Revocación |
La variable cambia la dirección durante una duración determinada. El valor final será el mismo que el valor inicial y la velocidad final será la negativa de la velocidad inicial. |
| sinusoidal desde el intervalo |
La variable oscila dentro de un intervalo determinado de valores, con un período de oscilación especificado, durante una duración determinada. |
| sinusoidal a partir de la velocidad |
La variable oscila con un período de oscilación especificado, durante una duración determinada. La amplitud de oscilación viene determinada por la velocidad inicial de la variable. |
| detención suave |
La variable de animación llega a una parada suave en un valor final especificado, dentro de una duración máxima de tiempo. |
La tabla siguiente contiene ilustraciones para cada una de estas transiciones.
| Ilustraciones |
|---|
  ilustración de transición constante    |
   |
   |
 |
Transiciones personalizadas
Un interpolador define la función matemática que determina cómo cambia una variable de animación a lo largo del tiempo a medida que avanza de su valor inicial a un valor final. Cada transición de la biblioteca de transición tiene un objeto interpolador asociado proporcionado por el sistema e implementa la función interpolador. Si una aplicación requiere un efecto que no se puede especificar mediante la biblioteca de transición, puede implementar una o varias transiciones personalizadas mediante la implementación de un objeto interpolador para cada nueva transición. Las aplicaciones no pueden usar directamente los objetos interpoladores y, en su lugar, deben encapsularse en una transición asociada. Se usa un generador de transición para generar transiciones a partir de un objeto interpolador. Consulte IUIAnimationInterpolator e IUIAnimationTransitionFactory para obtener más detalles.
Tenga en cuenta que la mayoría de las aplicaciones tendrán todas las transiciones que necesitan mediante la biblioteca de transiciones y, por lo tanto, no tendría que implementar un interpolador.
Storyboards
Un guión gráfico es una colección de transiciones aplicadas a una o varias variables de animación a lo largo del tiempo. Se garantiza que las transiciones de un guión gráfico permanecen sincronizadas entre sí y el guión gráfico se programa o cancela como una unidad. Después de crear las transiciones deseadas, una aplicación crea un guión gráfico mediante el administrador de animaciones, agrega las transiciones al guión gráfico, configura el guión gráfico correctamente y lo programa para que se reproduzca lo antes posible. El administrador de animaciones determina la hora de inicio real del guión gráfico, ya que puede haber contención con otros guiones gráficos que actualmente animan las mismas variables.
La duración general de un guión gráfico depende de las duraciones de las transiciones dentro del guión gráfico. No es necesario corregir la duración de una transición; se puede determinar mediante el valor y la velocidad de las variables animadas cuando comienza la transición. Por lo tanto, la duración de un guión gráfico también puede depender del estado de las variables que anima.
En los ejemplos siguientes se supone que se ha creado un administrador de animaciones, una biblioteca de transición y un temporizador. Para obtener más información, vea Crear los objetos de animación principales. En los ejemplos también se supone que la aplicación ha creado tres variables de animación (X, Y y Z) mediante el método IUIAnimationManager::CreateAnimationVariable y cinco transiciones (T1, T2, T3, T4 y T5) mediante el uso de uno de los métodos de la interfaz IUIAnimationTransitionLibrary .
- Creación de un guión gráfico simple
- Uso de una duración de Context-Sensitive
- Creación de un guión gráfico más complejo
- Uso de fotogramas clave
- Mantener variables
- Programación de un guión gráfico
Creación de un guión gráfico simple
Para crear un guión gráfico sencillo, use el método IUIAnimationManager::CreateStoryboard para crear un nuevo guión gráfico, el método IUIAnimationTransitionLibrary::CreateLinearTransition para crear una transición lineal, T1 y el método IUIAnimationStoryboard::AddTransition para aplicar la transición T1 a la variable X y agregar la transición resultante al guión gráfico.
Este proceso produce un guión gráfico simple, como se muestra en la ilustración siguiente. El guión gráfico contiene una transición, T1, de modo que el valor de la variable X cambia linealmente durante una duración fija de tiempo.
Tenga en cuenta que para un escenario tan sencillo, una opción alternativa es usar el método IUIAnimationManager::ScheduleTransition .
Uso de una duración de Context-Sensitive
Aunque algunas transiciones tienen una duración fija, la duración de otras depende del valor inicial o la velocidad de la variable animada cuando comienza la transición. Por ejemplo, el método IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed crea una transición con una duración proporcional a la diferencia entre el valor inicial de la variable de animación y el valor final especificado. En esta ilustración, y las demás ilustraciones, estas transiciones con duraciones arbitrarias se muestran con un signo de interrogación (?) y sus duraciones reales se determinan cuando se reproduce el guión gráfico.
Creación de un guión gráfico más complejo
Después de crear un guión gráfico y agregar una sola transición, T1, puede anexar una segunda transición para la variable X llamando al método IUIAnimationStoryboard::AddTransition de nuevo, pero con T2 en lugar de T1.
Suponiendo que la transición de T2 tiene una duración que distingue contexto, el guión gráfico ahora contiene dos transiciones de retroceso a atrás de duración arbitraria que afectan a la variable X.
Al llamar a AddTransition de nuevo con la variable Y y la transición T3 se agrega una tercera transición al principio del guión gráfico. Dependiendo de los valores de X e Y cuando se reproduce el guión gráfico, T3 puede terminar después de T1 o incluso después de T2.
Uso de fotogramas clave
Para agregar una transición en un desplazamiento desde el principio del guión gráfico, primero debe agregar un fotograma clave. Los fotogramas clave representan instantes en el tiempo y, por sí mismos, no tienen ningún efecto en el comportamiento del guión gráfico. Cada guión gráfico tiene un fotograma clave implícito que representa el inicio del guión gráfico, UI_ANIMATION_KEYFRAME_STORYBOARD_START; Puede agregar nuevos fotogramas clave en desplazamientos desde el principio llamando al método IUIAnimationStoryboard::AddKeyframeAtOffset con UI_ANIMATION_KEYFRAME_STORYBOARD_START.
El desplazamiento en el que se agrega un fotograma clave siempre es relativo a otro fotograma clave. En el diagrama siguiente se muestra el resultado de agregar keyframe1 y transition T4, que se aplica a la variable Z, alineada con keyframe1 y se crea con una duración fija. Por supuesto, dado que aún no se conocen las duraciones de las otras transiciones, es posible que T4 no sea la última transición a finalizar.
Los fotogramas clave también se pueden colocar en los extremos de las transiciones mediante el método IUIAnimationStoryboard::AddKeyframeAfterTransition . En el diagrama siguiente se muestra el resultado de agregar keyframe2 después de T1 y keyframe3 después de T2.
Dado que las duraciones de T1 y T2 no se conocen hasta que se reproduce el guión gráfico, los desplazamientos del fotograma clave2 y el fotograma clave3 tampoco se determinan hasta entonces. Por lo tanto, el fotograma clave2 e incluso el fotograma clave3 pueden producirse antes que keyframe1.
Tanto el inicio como el final de una transición se pueden alinear con fotogramas clave mediante el método IUIAnimationStoryboard::AddTransitionBetweenKeyframes . En el diagrama siguiente se muestra el resultado de agregar una quinta transición, T5, en la variable Y, entre keyframe2 y keyframe3. Esto modifica la duración de T5, lo que hace que sea más largo o más corto en función de los desplazamientos relativos de keyframe2 y keyframe3.
Mantener variables
Si T4 termina después de T2 y T5, el guión gráfico deja de animar variables X e Y, lo que hace que estén disponibles para que otros guiones gráficos se animen. Sin embargo, la aplicación puede llamar al método IUIAnimationStoryboard::HoldVariable para solicitar que el guión gráfico contenga algunas o todas las variables que anima en sus valores finales hasta que se haya completado el guión gráfico. En el diagrama siguiente se muestra el resultado de mantener X y Z cuando el T4 finaliza por última vez. Observe que el guión gráfico contiene X en su valor final hasta que se haya completado el guión gráfico. La suspensión no tiene ningún efecto en Z porque el guión gráfico termina cuando finaliza T4.
Aunque este guión gráfico no mantiene Y, su valor no cambia después de que se complete T5 a menos que otro guión gráfico lo anime. Dado que no se mantiene Y, cualquier otro guión gráfico, independientemente de la prioridad, puede animar Y después de que el T5 haya finalizado. Por el contrario, dado que se mantiene X, un guión gráfico de prioridad inferior no puede animar X hasta que finalice este guión gráfico.
Todas estas ilustraciones han asumido un conjunto arbitrario de valores actuales para las variables cuando el guión gráfico comienza a reproducirse. Si se encuentran otros valores, es probable que las duraciones de las transiciones contextuales sean diferentes, como se muestra en la ilustración siguiente.
En este escenario, T5 comienza antes de que finalice el T3 y, por tanto, se recorta T3. Dado que T4 termina antes de T2 y T5, el valor de Z se mantiene hasta el final del guión gráfico. En general, los valores y velocidades de las variables cuando un guión gráfico comienza a jugar pueden afectar al orden de fotogramas clave y a la longitud y forma generales del guión gráfico.
Programación de un guión gráfico
Al programar un guión gráfico, su hora de inicio viene determinada por su esquema y los esquemas de los guiones gráficos que se encuentran actualmente en la programación. En concreto, los primeros y los últimos momentos en los que el guión gráfico anima cada variable individual determinan si y cuándo entran en conflicto dos guiones gráficos, pero los detalles internos de las transiciones dentro de no son importantes.
En la ilustración siguiente se muestra el esquema de un guión gráfico con cinco transiciones que animan tres variables.
Una piedra angular de la plataforma de animación de Windows es su compatibilidad para permitir que una animación se complete antes de que comience otra, cuando sea necesario. Aunque esto elimina muchos problemas lógicos, también presenta una latencia arbitraria en la interfaz de usuario. Para solucionar esto, las aplicaciones pueden especificar el retraso aceptable más largo para que se inicie un guión gráfico, mediante el método IUIAnimationStoryboard::SetLongestAcceptableDelay y el administrador de animaciones usa esta información para programar el guión gráfico antes de que transcurre el período de latencia especificado. Cuando se programa un guión gráfico, el administrador de animaciones determina si otros guiones gráficos deben cancelarse, recortarse, concluirse o comprimirse.
Una aplicación puede registrar un controlador al que se llamará cuando cambie el estado de un guión gráfico. Esto permite a la aplicación responder cuando el guión gráfico comienza a reproducirse, se ejecuta hasta la finalización, se quita por completo de la programación o se impide que se complete debido a la interrupción de un guión gráfico de mayor prioridad. Para identificar los guiones gráficos pasados a controladores de eventos de guion gráfico (o comparaciones de prioridad), una aplicación puede usar el método IUIAnimationStoryboard::SetTag para aplicar etiquetas a guiones gráficos, de forma similar a las que se pueden usar para identificar variables. Al igual que con la reutilización del guión gráfico, los desarrolladores deben tener precaución al usar etiquetas para identificar guiones gráficos y asegurarse de que las ambigüedades no surgen cuando las acciones del usuario dan lugar a que se ponen en cola muchos guiones gráficos.
En los ejemplos siguientes se muestran dos variaciones de un intento de programar el guión gráfico creado en las secciones anteriores de este tema.
En este escenario, seis guiones gráficos, A a F, ya se han programado para animar variables W, X, Y y Z, pero solo A y B han empezado a jugar. El nuevo guión gráfico, con la etiqueta G, tiene su retraso más largo aceptable establecido en la duración que se muestra en la ilustración siguiente.
La aplicación tiene comparaciones de prioridad registradas que incluyen la siguiente lógica:
- G solo puede cancelar C y E, y solo para evitar errores.
- G solo puede recortar A, C, E y F, y solo para evitar errores.
- Cualquier guión gráfico puede comprimir cualquier otro guión gráfico (la compresión siempre se realiza solo para evitar errores).
Nota
El calificador "solo para evitar errores" significa que las comparaciones de prioridad registradas devuelven S_OK solo cuando el parámetro priorityEffect es UI_ANIMATION_PRIORITY_EFFECT_FAILURE. Consulte el método IUIAnimationPriorityComparison::HasPriority para obtener más información.
Para iniciar G antes de que haya transcurrido el retraso aceptable más largo, el administrador de animaciones debe hacer lo siguiente:
- Recortar F
- Cancelar E
Cuando se cancela E, D y F se descubren y revierten a sus contornos originales:
El administrador de animaciones no necesita cancelar o recortar C para programar antes de que haya transcurrido su retraso aceptable más largo, por lo que la reunión de C y G determina cuándo se inicia G.
Una vez que G se ha programado correctamente, se pueden determinar las duraciones de sus transiciones y, por tanto, se conoce el resto de su esquema. Sin embargo, el esquema puede cambiar si se quita posteriormente otro guión gráfico de la programación.
Como segundo ejemplo, considere un escenario como el anterior, pero con un retraso más corto aceptable más corto especificado para G.
En este caso, se realizan las siguientes acciones:
- Recortar F
- Cancelar E
- Cancelar C
Además, el administrador de animaciones debe comprimir D por la cantidad que se muestra para permitir que G se inicie después de su retraso aceptable más largo y no más tarde.
También se comprimen los intervalos relativos, A, B y F.
Sin embargo, los guiones gráficos en variables no relacionadas (no se muestran) no se comprimen.
Una vez más, ahora se conoce el esquema de G y es diferente del resultado en el primer escenario porque las variables tienen valores diferentes cuando comienza G.
Temas relacionados
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de