Facilitação vs. Mola
Facilitação segue uma curva de tempo definida. Uma mola se move como uma mola real e para sozinha.
Use easing para desvanecimentos, mudanças de cor e etapas temporizadas. Use uma mola para objetos que se movem ou seguem um arrasto.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Facilitação
Easing é a curva de tempo que define como uma animação acelera e desacelera.
cubic-bezier()Um painel entra rápido e para de leve. Sua saída é mais curta e direta.
- Use-o quando
- Use easing quando a velocidade deve mostrar peso, direção ou propósito.
- Não o use quando
- Nunca use o mesmo grande efeito de ressalto em todas as interações.
- Nome usado no código
cubic-bezier()
Animação de mola
A animação de mola segue um modelo físico. Rigidez, amortecimento, massa e velocidade inicial controlam como ela se move.
stiffness / damping / massUm card arrastado passa um pouco do seu espaço e depois se acomoda no lugar.
- Use-o quando
- Use-o para movimentos guiados por gestos que podem ser interrompidos e devem manter a velocidade do usuário.
- Não o use quando
- Nunca adicione muita animação a controles comuns ou tarefas sensíveis.
- Nome usado no código
stiffness / damping / mass
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| FacilitaçãoEasing | Use easing quando a velocidade deve mostrar peso, direção ou propósito. | Nunca use o mesmo grande efeito de ressalto em todas as interações. | cubic-bezier() |
| Animação de molaSpring Animation | Use-o para movimentos guiados por gestos que podem ser interrompidos e devem manter a velocidade do usuário. | Nunca adicione muita animação a controles comuns ou tarefas sensíveis. | stiffness / damping / mass |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Facilitação (Easing), Animação de mola (Spring Animation) para o nosso fluxo real de usuário. Use esta regra: Facilitação segue uma curva de tempo definida. Uma mola se move como uma mola real e para sozinha. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.