Quadros-chave e escalonamento
Crie animações complexas e escalonadas.
Quadros-chave e escalonamento é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Animações em várias etapas
As transições simples vão de A a B. Para movimentos em várias etapas, como quicar, pulsar ou percorrer cores, o Angular oferece keyframes; para animar muitos itens em sequência, oferece stagger.
A função keyframes
keyframes recebe uma matriz de etapas style, cada uma com um offset de 0 a 1 que indica sua posição ao longo da duração.
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))Entendendo offset
offset é a fração da duração total. 0 é o início e 1 é o fim. Os valores de deslocamento devem aumentar ao longo da matriz.
Um efeito de quique
Os quadros-chave permitem ultrapassar a posição final e se estabilizar, criando um efeito de quique.
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])Omitindo offsets
Se você omitir offset, o Angular distribuirá os quadros-chave uniformemente ao longo da duração.
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])A função query
Para animar os elementos filhos de um hospedeiro, use query para selecioná-los dentro de uma transição.
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])A função stagger
stagger aplica um intervalo de tempo entre a animação de cada elemento consultado, criando um efeito em cascata.
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])Aplicando stagger a uma lista
Combine query + stagger em um gatilho no contêiner da lista para que os itens apareçam gradualmente, um após o outro.
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])A opção optional
Passe { optional: true } para query para que a animação não gere um erro quando não houver elementos correspondentes.
Stagger negativo
Um valor negativo em stagger inverte a ordem, animando primeiro os últimos itens, o que é útil para cascatas de saída.
stagger(-50, animate('200ms', style({ opacity: 0 })))Observação sobre desempenho
Aplicar stagger a muitos elementos pode ser pesado. Mantenha as durações por item curtas e prefira transformações e opacidade para manter as animações na GPU.
Verificação rápida
Verifique sua compreensão de keyframes e stagger.
Recapitulação
Você aprendeu que keyframes define movimentos em várias etapas usando valores de offset, enquanto query + stagger animam muitos elementos em uma cascata. Use { optional: true } por segurança e prefira propriedades compatíveis com a GPU.
Perguntas Frequentes
A aula “Quadros-chave e escalonamento” é grátis?
Sim — o texto completo de “Quadros-chave e escalonamento” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Quadros-chave e escalonamento”?
Crie animações complexas e escalonadas. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Quadros-chave e escalonamento”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fundamentos de animação: trigger e state
- Transições e temporização
- Animações de entrada e saída
- Quadros-chave e escalonamento