Este painel consiste em uma interface estilo linha do tempo que representa tanto os elementos que podem ser transicionados ou animados, quanto as próprias transições, agrupadas por tipo.
O tipo de transição refere-se ao evento que aciona a animação dos elementos: uma sobreposição comutando IN e OUT, ou uma paginação de uma Lista de Conteúdo Dinâmica, seja manualmente ou autociclo.
Interface do painel de transição
(1) Guias de tipo de transição : Selecione qual transição editar para o elemento atualmente em foco.
(2) Fase de transição e controles : alterne entre editar os diferentes momentos da transição e acionar visualizações para a transição atual. Esses controles mudarão de acordo com o tipo de transição.
(3) Árvore de transição : é muito semelhante à árvore de elementos principal. Aqui você verá todos os elementos que podem ser animados no escopo do tipo de transição atual. Abordaremos mais sobre os escopos abaixo.
(4) Linha do tempo : É a representação visual de todas as A nimações dos elementos na transição atual. O comprimento de um bloco de animação representa a duração da animação e a posição relativa à régua de tempo representa o atraso .
(5) Inspetor de animação : Assim como no Inspetor de elementos principal, aqui você verá todos os parâmetros configuráveis da animação selecionada, que serão destacados na linha de tempo.
(6) Opções de linha de tempo : altere o nível de zoom, alterne entre diferentes escalas de tempo (milissegundos, 30 fps, 60 fps) ou ative / desative o ajuste ao arrastar animações.
Escopos de transição
Chamamos escopos para os diferentes subconjuntos de elementos de sua cena que podem ser animados para cada tipo de transição.
Ambas as transições Overlay IN / OUT e List Pagination são basicamente uma orquestração de animações de vários elementos após um evento específico (por exemplo, configurar a Overlay IN ou ir para a próxima página).
Nas transições Overlay IN / OUT , todos os elementos que pertencem ao mesmo Overlay podem ser animados juntos. Portanto, ao selecionar uma sobreposição ou qualquer um de seus elementos descendentes, você verá todos eles listados na árvore de transição, até a própria sobreposição, mas não outras sobreposições.
Sobreposição de escopo de transição IN / OUT
Em vez disso, para as transições de Paginação de Lista , os elementos capazes de serem orquestrados juntos após uma mudança de página são todos os elementos descendentes da Lista que dispara esse evento de paginação. Portanto, você verá apenas o item da lista e seus descendentes na árvore de transição.
Escopo de transição de paginação de lista
Fases de Transição
As transições IN / OUT de sobreposição, bem como as transições de paginação de lista, consistem em duas animações encadeadas cada: o momento em que as coisas estão saindo e aquele em que as coisas estão entrando . Chamamos esses momentos de fases de uma transição.
Nas transições Overlay , temos as fases OUT para IN e IN para OUT .
Sobrepor fases de transição IN / OUT e controle de visualização
Em transições Paginação temos a corrente itens L eaving a cena e os n ew de entrar.
Listar fases de transição de paginação e controles da página seguinte / anterior
Esses controles permitem que você alterne entre essas fases de cada Transição para configurar animações diferentes para os elementos em cada um desses "momentos". Os elementos exibidos na árvore de transição não mudarão entre as fases, mas você verá diferentes blocos de animação na linha de tempo.
Você encontrará mais detalhes sobre cada um em seus respectivos artigos.
Árvore e Linha do Tempo
Você encontrará cada elemento no escopo de transição atual representado como uma trilha na Linha de tempo. O nome do elemento em foco será ligeiramente destacado como uma referência visual.
Esses blocos coloridos que você vê nas trilhas representam a animação aplicada a cada elemento. Só pode haver uma animação por elemento por fase de transição.
O rótulo em cada bloco de animação é o nome da predefinição de animação, que é um conjunto de animações predefinidas que oferecemos. O comprimento dos blocos se correlaciona com a duração da animação, e sua distância da borda esquerda representa o atraso da animação (combinando com a escala de tempo acima).
Você pode editar todos esses valores movendo diretamente os blocos de animação e arrastando-os pelas bordas para alterar seu tamanho. Esses parâmetros também serão exibidos e editáveis no Inspetor de animação , além de outras configurações, como curvas de atenuação.
Atenção, animadores
Se você vem do After Effects ou de ferramentas semelhantes, pode achar essa interface muito familiar, mas ela tem uma pequena diferença conceitual. Em Efeitos Depois, cada pista representa um OMPOSIÇÃO C, o bloco em cada pista representa o visibilidade de que a composição ao longo do tempo, e a entrada e animações que saem (ou efeitos) são representados como segmentos no início e no fim de cada bloco de composição. Em vez disso, optamos por representar a própria animação como um bloco, já que nosso modelo não é sobre uma animação linear do início ao fim, mas sim uma disparada por evento, e cada elemento em sua sobreposição será mantido em exibição após a transição para IN, irá desaparecer completamente após a transição OUT.
Opções de cronograma
Abaixo do Inspetor de linha do tempo, você encontrará alguns controles gerais relacionados à visualização:
Alternância de snap, menu Formato de hora e controle deslizante de zoom
Botão alternar "Ajustar à régua" : quando ativado, arrastar e redimensionar animações na linha do tempo se ajustará às marcas da régua de tempo.
Formato de hora : escolha a escala e o formato usados na régua de tempo e código de tempo.
Lembre-se de que essa escala é apenas uma referência visual para todos que costumavam trabalhar em ferramentas de "quadros por segundo".
Alterá-lo não afetará a taxa de quadros das animações, que sempre tentará chegar a 60fps. Como nossos gráficos são renderizados usando HTML, essa taxa de quadros sempre dependerá do navegador e do dispositivo onde os gráficos ao vivo são exibidos.
Controle deslizante de zoom : trabalhe no nível de microssegundos ou visualize toda a sua transição de relance. Você também pode usar ctrl + rolagem do mouse ou gesto de pinça do trackpad ao passar o mouse sobre a linha do tempo para aumentar e diminuir o zoom.