Este panel consiste en una interfaz de estilo de línea de tiempo que representa tanto los elementos susceptibles de ser transicionados o animados, como las transiciones mismas, agrupadas por tipo.
El tipo de transición se refiere al evento que desencadena la animación de los elementos: una superposición que cambia IN y OUT, o una paginación de una lista de contenido dinámico, ya sea de forma manual o automática.
Interfaz del panel de transiciones
(1) Fichas Tipo de transición : seleccione qué transición editar para el elemento enfocado actualmente.
(2) Fase de transición y controles : cambie entre la edición de los diferentes momentos de la transición y active las vistas previas de la transición actual. Estos controles cambiarán según el tipo de transición.
(3) Árbol de transición : es muy similar al árbol de elementos principal. Aquí verá todos los elementos que se pueden animar en el ámbito del tipo de transición actual. Cubriremos más sobre los alcances a continuación.
(4) Línea de tiempo : Es la representación visual de todas las animaciones A de los elementos en la transición actual. La longitud de un bloque de animación representa la duración de la animación y la posición relativa a la regla de tiempo representa el retraso .
(5) Inspector de animación : al igual que en el Inspector de elementos principal, aquí verá todos los parámetros configurables de la animación seleccionada, que se resaltarán en la línea de tiempo.
(6) Opciones de la línea de tiempo : cambie el nivel de zoom, alterne entre diferentes escalas de tiempo (milisegundos, 30 fps, 60 fps) o habilite / deshabilite el ajuste al arrastrar animaciones.
Alcances de transición
Llamamos ámbitos a los diferentes subconjuntos de elementos de su escena que se pueden animar para cada tipo de transición.
Las transiciones de Overlay IN / OUT y List Pagination son básicamente una orquestación de animaciones de varios elementos después de un evento específico (por ejemplo, configurar el Overlay IN o ir a la página siguiente).
En las transiciones de Superposición IN / OUT , todos los elementos que pertenecen a la misma Superposición se pueden animar juntos. Por lo tanto, cuando seleccione una superposición o cualquiera de sus elementos descendientes, verá todos ellos enumerados en el árbol de transición, hasta la superposición en sí, pero no otras superposiciones.
Update Animations sólo se aplica al elemento cuyo valor o contenido cambia. No se aplican a elementos hermanos o padres. Esta es la principal diferencia con las transiciones Overlay IN/OUT que pueden afectar a todos los elementos contenidos en un Overlay.
Para transiciones paginación de lista lugar, los elementos susceptibles de ser orquestado juntos después de un cambio de página son todos los elementos que son descendientes de la lista que los incendios que caso de paginación. Por lo tanto, solo verá el elemento de lista y sus descendientes en el árbol de transición.
Fases de transición
Las transiciones de superposición IN / OUT, así como las transiciones de paginación de listas, constan de dos animaciones encadenadas cada una: el momento en que las cosas se van y el momento en que las cosas entran . Llamamos a esos momentos las fases de una transición.
En las transiciones de superposición tenemos las fases OUT a IN y IN a OUT .
Superposición de fases de transición IN / OUT y control de vista previa
En las transiciones de paginación tenemos la corriente artículos L eaving la escena y los N ew Introducción.
Enumere las fases de transición de la paginación y los controles de la página siguiente / anterior
Esos controles le permiten alternar entre estas fases de cada transición para configurar diferentes animaciones para los elementos en cada uno de esos "momentos". Los elementos que se muestran en el árbol de transición no cambiarán entre las fases, pero verá diferentes bloques de animación en la línea de tiempo.
En Update Animations, este tipo de transición manejará las animaciones para el valor anterior (leaving) y el valor nuevo (entering) del elemento.
Árbol y línea de tiempo
Encontrará cada elemento en el ámbito de transición actual representado como una pista en la línea de tiempo. El nombre del elemento enfocado se resaltará ligeramente como referencia visual.
Los bloques de colores que ves en las pistas representan la animación aplicada a cada elemento. Solo puede haber una animación por elemento por fase de transición.
La etiqueta de cada bloque de animación es el nombre del preajuste de animación, que son un conjunto de animaciones prefabricadas que ofrecemos. La longitud de los bloques se correlaciona con la duración de la animación, y su distancia desde el borde izquierdo representa el retraso de la animación (que coincide con la regla de tiempo anterior).
Puede editar todos estos valores moviendo directamente los bloques de animación y arrastrándolos por sus bordes para cambiar su tamaño. Estos parámetros también se mostrarán y editarán en el Inspector de animación , además de otras configuraciones, como curvas de aceleración.
Atención, animadores
Si viene de After Effects o herramientas similares, puede encontrar esta interfaz muy familiar, pero tiene una ligera diferencia conceptual. En After Effects, cada pista representa una C omposición , el bloque de cada pista representa la visibilidad de esa composición a lo largo del tiempo, y las animaciones (o efectos) de entrada y salida se representan como segmentos al principio y al final de cada bloque de composición. En su lugar, elegimos representar la animación en sí misma como un bloque, ya que nuestro modelo no se trata de una animación lineal de principio a fin, sino de una activada por eventos, y todos los elementos de su superposición se mantendrán a la vista después de la transición IN, y desaparecerá por completo después de hacer la transición OUT.
Opciones de línea de tiempo
Debajo del Inspector de la línea de tiempo, encontrará algunos controles generales relacionados con la vista:
Alternar "Ajustar a la regla" : cuando está activado, arrastrar y cambiar el tamaño de las animaciones en la línea de tiempo se ajustará a las marcas de la regla de tiempo.
Formato de hora : elija la escala y el formato utilizados en la regla y el código de tiempo.
Tenga en cuenta que esta escala es solo una referencia visual para todos los que solían trabajar en herramientas de "cuadros por segundo".
Cambiarlo no afectará la velocidad de cuadros de las animaciones, que siempre intentará alcanzar los 60 fps. Dado que nuestros gráficos se renderizan utilizando HTML, esta velocidad de fotogramas siempre dependerá del navegador y el dispositivo donde se muestran los gráficos en vivo.
Control deslizante de zoom : trabaje a nivel de microsegundos o vea toda la transición de un vistazo. También puede usar ctrl + desplazamiento del mouse o el gesto de pellizco del trackpad al pasar el cursor por la línea de tiempo para acercar y alejar.FF