Design motion e animação de interface

1) Para quê animação no produto

• explica as relações de causa e efeito (onde desapareceu, de onde surgiu o elemento),
• direciona a atenção para a ação principal,
• confirma o resultado (feedback) e reduz a carga cognitiva,
• torna as transições previsíveis e tangíveis.

Regra nº 1: sentido> estilo. Qualquer animação responde à pergunta "O que aconteceu e o que tem a ver comigo? ».

2) Princípios básicos

1. Hierarquia de movimento: os primeiros contêineres são movidos, depois o conteúdo e as peças.
2. Permanência: pattern idênticos para ações idênticas.
3. Poupança: mínimo de propriedades, mínimo de quadros; É melhor e mais claro.
4. Física realista: aceleração no início, desaceleração no final; faltam «passos».
5. Reversível, «para trás» é sentido espelhadamente «para frente».
6. Disponibilidade: respeite as configurações do sistema para reduzir a animação.

3) Duração e curvas (recomendações)

3. 1 Duração (desktop/mobile)

Hover: 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/Toast: entrada 180-240 ms, saída 120-160 ms

Modalks/drowers: 200-320 ms

Transições de ecrã: 240-360 ms

Referências scroll/paralax: ≤ 200 ms por segmento, evitar ciclos infinitos

3. 2 Curvas

Principal: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) '- ritmo natural «material»

Entrada mais rápida, saída mais suave: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Elasticidade (raramente, sotaque): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'com limite de overshoot ≤ 8px/8 °

Regra: não use a interpolação linear para mover e opacity ao mesmo tempo - sensação de «mecânica».

4) Coreografia de transições

Aparecimento: Escala leve 0. 98→1. 0 + fade-in, deslocamento 8-16 px no eixo de ocorrência.
Desaparecimento: ordem inversa, mais rápido que a entrada (- 20-30%).
Redesenhar/mudar as chapas: a base geral (contêiner) é movida para 16-24 px; a guia ativa é realçada antes do movimento começar.
Listas: enfraqueça cascata (stagger 20-40 ms/elemento, no máximo 6-8 elementos).

5) Micro-interações (patterns)

Botão (hover/press): sombra + escrivaninha leve/scale 0. 98; pressed rebenta ≤ 80 mc.
Foco: anel de contraste sem blur; animar espessura/transparência em vez de glow.
Inputs: carruagem/realce do campo em focus; erros - agitar ≤ 6 px, ≤ 140 ms, 1 ciclo.
Toggle/Checkbox: snap até a posição final, o atraso do clique não passa de 60-80 ms.
Skeleton/download: shimmer 1200-1600 ms, amplitude de brilho ≤ 20%, sem flash brusco.

6) Estados de conteúdo

Loading → Sucess/Empty/Erro: um «canal» de movimento; não misture as diferentes direções.
Toast/Alerts: vem do lado da origem do evento (por exemplo, abaixo-direita para as ações do usuário).
Pull to refresh: alongamento com largura elástica; tempo de retorno ≤ 250 ms.

7) Disponibilidade (A11y) e segurança

Suporte 'preferers-reduced-motion': substitua os movimentos por 'fade/scale' ≤ 1% ou transição estática.
Evite flashes> 3 por segundo e grandes piscadas de contraste (epilepsia fotossensiva).
Não use um forte paralax/zoom em usuários com histórico de picagem; faça uma opção de desligamento.
Os estilos de foco são sempre visíveis sem animação (não apenas cor/movimento).

8) Desempenho (60 FPS como alvo)

Anime apenas opacity e trans (translate/scale/rotate); evite 'top/left/width/height'.
Inclua o compositing: 'trans: translateZ (0)' ou 'will-altere: trans, opacity' (moderado).
Minimize o repaint: não anime sombras com blur maior e filtros em vários itens.
Separe as grandes transições em batches; use o requestAnimationFrame.
Para as listas, é possível virtualizar/redefinir fora da tela.

9) Tokens motion em design

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: `motion.{duration|easing|stagger}.{role}` — `hover`, `focus`, `overlayIn`, `pageTransition`, `listItem`.

10) Implementação (CSS/JS/React)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lotti/SVG: Use os estados nativos ilustrativos e onboarding; não para controladores críticos. Otimize e mantenha em memória.

11) Pattern download

Skeleton em vez de spinner onde a estrutura de conteúdo é conhecida.
Progress: Um bar determinado, se for conhecido o progresso; Indeterminado, com ritmo uniforme, sem movimento.
Evite skeleton flutuante na reconstrução - Fixe as dimensões.

12) Transições entre páginas/telas

Mantenha o ponto de atenção (shared element transitions) - o cartão é «exposto» em um detalhe.
A navegação para dentro avança/para a direita/para cima, para trás; a direção é unificada para a plataforma.
O suprimento de fundo fica escuro entre 40% e 60% em overleads.

13) Especificidades iGaming

Spin/Reveal: uma aceleração curta (≤ 200 ms) + rotação uniforme + suave; a proibição de ciclos infinitos sem efeito.
Win/Jackpot: elevação de luz ≤ 500 ms, sem versículo; tomas de som em baixo volume; o texto da vitória é chitabelino (AAA em contraste).
Torneios/classificações: acréscimo de conta - contagem com números tabelados e passo fácil 40-60 ms/unidade (batches), sem «saltos» layout.
Jogo responsável: notificações e limites sem efeitos de distração; animação mínima, ênfase na lisura.

14) Anti-pattern

Atrasos> 120 ms até responder ao clique.
Elevador de opacity + scale 0. 9→1. 05→1. 0 com overshoot para cada pequena peça.
Paralax de fundo em conflito com scroll.
Infinitas pontuações/pulsações.
Animação das propriedades layout/paint ('height', 'left',' filter: blur () ') em vários elementos.
Curvas não permanentes e duração em ações idênticas.

15) Processo e QA

• Protótipos com tymings/curvas; coreografia em quadros.
• Catálogo de motion-tokens e exemplos para componentes.

• Testes unit de visibilidade/estado (transições concluídas como esperado).
• Testes visuais (súmulos do fim das animações).
• Perfilação (Performance/Timeline) em cenas com carga máxima.

• Apoiado por 'preferers-reduced-motion'.
• Somente transfer/opacity.
• A duração e as curvas correspondem a tokens.
• Sem flash> 3/segundo e linha forte.
• Skeleton em vez de spinner, onde possível.
• As transições são reversíveis e previsíveis.

16) Documentação em design

«Motion-tokens»: duration/easing/stagger com exemplos.
«Pattern de transição»: modais, listas, guias, páginas.
«A11y & Performance»: hyde de reduce-motion e composição.
«Do/Don 't»: clipes curtos com exemplos de sucesso/fracasso.

Resumo curto

O design Motion é uma linguagem de causa e efeito. Mantenha os times curtos, as curvas alinhadas e as propriedades baratas para render. Respeite a disponibilidade, documente os tokens e verifique o desempenho. Então, a animação reforça o UX e não interfere com a velocidade e clareza da interface.