Astra profundo · Capítulo 16 de 31 · 30 min
Projetar animações que orientam a ação
Você sai com uma sequência de interação animada, legível e pronta para testar na agenda do Aurora.
Este capítulo faz parte do curso gratuito Astra profundo.
No Estúdio Aurora, caso fictício deste curso, uma pessoa escolhe uma oficina e espera ver as datas disponíveis. A animação pode mostrar a relação entre escolha e resposta: o painel se abre perto do botão acionado, a data selecionada permanece visível e a confirmação ocupa o mesmo lugar. Você vai construir esse trecho da agenda, com movimento suficiente para explicar o que aconteceu.
Pense na experiência de abrir uma gaveta. A continuidade do deslocamento ajuda a acompanhar onde o conteúdo estava e onde ficou. Na interface, essa continuidade recebe o nome de transição de estado. O projeto começa pelo estado inicial e pelo estado final; duração, curva de aceleração e deslocamento dão forma à passagem. Sem essa relação, sobra apenas um efeito que disputa atenção com a tarefa.
Movimento ligado à tarefa
| Ação | Transição | Informação permanente |
|---|---|---|
| Abrir horários | Painel surge junto à oficina | Nome da oficina e botão de retorno |
| Escolher uma data | Realce breve da opção | Data selecionada por texto e borda |
| Confirmar | Resumo substitui a escolha | Oficina, data e próximo passo |
Prefira transformar posição aparente e opacidade quando o efeito permitir. O navegador pode compor essas propriedades sem recalcular continuamente a distribuição de todos os elementos. Alterar altura ou largura durante muitos quadros pode envolver outras etapas de renderização. A [orientação de desempenho CSS da MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/CSS) explica esse mecanismo. Escolha pela necessidade visual e confirme o comportamento no aparelho que interessa.
Aprofunde as decisões desta aula
Como transformar a intenção de movimento em código?
Astra contribui ao transformar essa intenção em código e conferir a tela renderizada. Você entrega o componente existente, os estados desejados e o comportamento esperado; o agente implementa, abre a página e compara o resultado. O desenho da interação continua explícito no pedido: após escolher uma oficina, mostrar os horários sem mudar a posição do título ou ocultar o botão de voltar. No exercício, use uma abertura de 180 milissegundos e um deslocamento de oito pixels como hipóteses de design. Esses valores são escolhas didáticas, não padrões universais. Comece com uma transição breve, execute a ação repetidamente e ajuste pela leitura. Um painel grande pode pedir outra duração; uma mensagem curta quase sempre precisa menos encenação que uma troca de ambiente.
Como resolver a sequência e oferecer movimento reduzido?
Resolva a sequência completa: o visitante abre os horários, seleciona sábado e confirma. Na abertura, o painel aparece; na seleção, borda e texto indicam a data escolhida; na confirmação, surge o resumo. A animação comunica a transição, enquanto palavras e estado visual comunicam o resultado. Essa divisão permite compreender a agenda mesmo numa captura de tela. A preferência de movimento reduzido muda a apresentação, preservando a tarefa. Com prefers-reduced-motion, troque deslocamentos amplos por mudança imediata ou discreta de opacidade. A [documentação da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) mostra como consultar essa preferência. O painel continua abrindo, a data permanece selecionável e a confirmação mantém seu texto. Compare duas versões sobre o mesmo componente, uma quase imediata e outra com a transição proposta. Observe se consegue seguir o foco com o teclado e se clicar novamente produz um estado claro. O critério de escolha é acompanhar a ação sem esperar pelo efeito. Quando a seleção responde bem nas duas, prefira a versão mais simples de manter.
A entrega do Aurora reúne o componente, uma gravação curta das três ações e uma nota explicando a escolha de duração. A gravação permite conferir continuidade; o arquivo editável permite ajustar o ritmo quando a agenda mudar. Na próxima oficina, você reutiliza a regra de comportamento e adapta o conteúdo, sem redesenhar toda a experiência.
Faça agora: anime a agenda
Reserve 30 minutos entre leitura, implementação e inspeção.
Passo 1: Escolha o trecho
Use a agenda já construída e fixe abertura, seleção e confirmação como os três estados do exercício.
Deu certo quando: O percurso cabe numa interação completa.
Passo 2: Implemente a transição
Peça ao Astra uma versão breve, mantendo o texto e a posição dos elementos principais.
Deu certo quando: A mudança responde à ação realizada.
Passo 3: Compare as condições
Percorra o trecho com mouse, teclado e movimento reduzido, observando a mesma sequência.
Deu certo quando: Todos os caminhos chegam ao resumo.
Passo 4: Registre a escolha
Guarde o componente e uma gravação, com uma frase sobre duração e comportamento.
Deu certo quando: Outra pessoa consegue repetir a inspeção.
No fim você tem: Componente de agenda animado e registro da decisão de movimento.
O movimento explica uma mudança de estado. A informação continua compreensível sem animação. A agenda e a gravação documentam a escolha.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- CursoEscrever bem com IAsugerido pelo grafoAs primeiras aulas do Astra pedem um briefing com referências e dirigem cada iteração por texto. O curso de escrita ensina a decidir o que pedir, dar contexto e conferir a saída, que é a base dessas aulas. Ordem decidida quando o Astra ganhou uma página por aula (Etapa 4, wave 3), para que as 31 aulas mostrem o que estudar antes.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo4 capítulos de “Astra profundo” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.