# Princípios de motion design para quem não anima

[Canonical HTML page](https://gradiently.design/pt-br/guide/motion-design-principles)

Você não precisa ser animador para criar movimento que pareça certo. Precisa de alguns princípios, de um punhado de durações e da disciplina de usar menos.

## The short version

- O bom motion design se apoia em cinco princípios: dar um propósito a cada movimento, calcular bem o tempo, suavizá-lo, ordená-lo por importância e usar o mínimo possível.
- Pequenos movimentos de interface costumam parecer certos entre cerca de 150 e 300 milissegundos, enquanto movimentos maiores e entradas precisam de mais tempo.
- O que entra deve desacelerar, o que sai deve acelerar e os loops contínuos devem se mover num ritmo constante.
- Quando vários elementos se movem, o mais importante deve se mover primeiro, e só uma coisa deve liderar de cada vez.
- Um pequeno sistema de movimento, com três durações e duas ou três curvas de suavização, mantém consistente o movimento de uma marca em todas as peças.

Os **princípios de motion design** são as regras práticas que fazem o movimento parecer natural, e não aleatório. A animação clássica de personagens tem os seus famosos doze, estabelecidos pelos animadores da Disney Frank Thomas e Ollie Johnston em *The Illusion of Life*. Para o trabalho de design, como posts, sites, logos e apresentações, cinco fazem quase todo o trabalho: **propósito, tempo, suavização, hierarquia e contenção**. Você pode usá-los sem nunca abrir um app de animação.

## Propósito: todo movimento deve ter uma função

O movimento é barulhento. Tudo o que se move puxa o olhar, então mover algo é afirmar que aquilo importa agora. Antes de animar, dê nome à função. Se não conseguir, deixe parado.

### Movimento com função

- Leva o olhar à única coisa que deve ser lida primeiro
- Mostra de onde algo veio ou para onde foi
- Confirma uma ação: enviado, salvo, adicionado
- Cria um clima com um fundo lento

### Movimento por si só

- Todo elemento quicando ao chegar
- Texto que continua se movendo enquanto você o lê
- Logos girando e botões pulsando
- Transições que fazem você esperar

## Tempo: quanto o movimento deve durar

A duração é o princípio que a maioria erra, em geral indo devagar demais nas coisas pequenas e depressa demais nas grandes. Duas regras ajudam. Movimentos pequenos e frequentes devem ser rápidos, porque as pessoas os veem o tempo todo. Movimentos que percorrem mais espaço ou mudam mais devem durar mais, porque o olho precisa de tempo para acompanhar.

| Tipo de movimento | Duração típica | Por quê |
| --- | --- | --- |
| Resposta de botões e interruptores | Cerca de 100 a 200 ms | Parece instantâneo, mas ainda é visível |
| Pequenas mudanças de interface, menus | Cerca de 200 a 300 ms | Rápido o bastante para não atrasar ninguém |
| Painéis grandes, mudanças de página | Cerca de 300 a 500 ms | Mais distância pede mais tempo |
| Texto entrando num post ou vídeo | Cerca de 0,4 a 1 s | Longo o bastante para ser notado como entrada |
| Deriva de fundo num loop | Muitos segundos por ciclo | Clima, não informação: deve ser quase imperceptível |

Faixas iniciais comuns usadas em trabalhos de interface e de movimento. Teste no aparelho de verdade e ajuste.

Um teste útil: se as pessoas notam a própria animação, e não o que ela mostra, ela está lenta ou grande demais. Se perdem a mudança por completo, está rápida demais.

## Suavização: por que nada deve se mover em velocidade constante

Objetos reais aceleram e desaceleram. O movimento numa velocidade constante, chamado de linear, parece mecânico porque nada no mundo se move assim. As curvas de suavização acrescentam aceleração e desaceleração, e escolher a certa é simples quando você conhece três casos.

- **Entrar: ease out.** Chegue rápido e assente com suavidade, como um carro estacionando. A maioria das entradas usa isso.
- **Sair: ease in.** Comece com suavidade e acelere ao partir. As saídas também podem ser mais curtas do que as entradas.
- **Mover-se dentro do quadro: ease in e out.** Comece e pare com suavidade.
- **Loops e rotações: linear.** O movimento contínuo deve manter um ritmo constante, ou parecerá hesitar na emenda.

```css
.panel-enter {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);  /* ease out */
}
.panel-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);  /* ease in, and shorter */
}
.background-drift {
  animation: drift 20s linear infinite;                    /* steady loop */
}
```

Os três casos em CSS. [Suavização, explicada](https://gradiently.design/pt-br/guide/easing) aprofunda as curvas.

## Hierarquia: mova primeiro o que é importante

O movimento cria uma ordem de leitura, assim como o tamanho e o peso num design estático. O que se move primeiro é lido primeiro. Quando vários elementos se animam, escalone-os por ordem de importância, com um intervalo curto de cerca de 50 a 150 milissegundos entre cada um, e deixe só um elemento liderar de cada vez. [Hierarquia visual](https://gradiently.design/pt-br/guide/visual-hierarchy) trata da versão estática da mesma ideia.

Um story vertical anunciando a coleção de primavera, com uma pequena etiqueta acima e uma linha de detalhes abaixo

Numa versão animada deste story, o título chega primeiro, depois a data, depois os detalhes. O fundo mantém o seu próprio ritmo lento por baixo.

1. **O fundo se acomoda** O campo já está se movendo devagar quando o post aparece. Ele cria o clima sem pedir para ser lido.
2. **O título entra** Uma entrada clara, suavizada com ease out, em menos de um segundo.
3. **As linhas de apoio vêm em seguida** A etiqueta e os detalhes chegam logo depois, na ordem de leitura, com um movimento menor.
4. **Tudo se firma** As palavras param e ficam paradas por tempo suficiente para serem lidas. Só o fundo continua se movendo.

## Contenção: use menos movimento do que você imagina

A quietude é o que dá sentido ao movimento. Se tudo se move, nada se destaca, e o design parece ansioso. Escolha um movimento principal por peça, mantenha as distâncias curtas e deixe as palavras paradas depois que chegam. A contenção também é sobre as pessoas: alguns espectadores acham o movimento desconfortável ou até enjoativo, então toda peça deve funcionar com o movimento desligado. [Movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion) explica como planejar isso.

> **O teste do quadro parado** Pause a sua animação em qualquer quadro. Se esse quadro não parecer um design acabado, o movimento está cobrindo um layout fraco.

## Consistência: um pequeno sistema de movimento

As marcas mantêm cores e fontes consistentes; o movimento merece o mesmo cuidado. Anote um sistema minúsculo e reutilize-o: três durações, duas ou três curvas de suavização e um movimento característico para fundos. Isso impede que cada peça nova invente a própria velocidade e torna o seu movimento reconhecível, como descreve [movimento para marcas estáticas](https://gradiently.design/pt-br/guide/motion-for-still-brands).

```css
:root {
  --motion-quick: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-quick: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}
```

Um sistema de movimento como tokens de design. Tudo usa esses nomes, e o movimento reduzido encurta todos eles num só lugar.

Aplique os mesmos princípios ao animar um logo, um post ou o destaque de um site. [Logos animados](https://gradiently.design/pt-br/guide/animated-logo) e [posts animados](https://gradiently.design/pt-br/guide/animated-social-posts) mostram tudo isso em ação.

## FAQ

### Quais são os princípios básicos do motion design?

Para o trabalho de design, cinco cobrem a maioria das necessidades: dar um propósito a cada movimento, escolher uma duração sensata, usar suavização, ordenar o movimento por importância e usar o mínimo de movimento possível.

### Quanto tempo uma animação deve durar?

A resposta de interface pequena costuma funcionar em cerca de 100 a 300 milissegundos, movimentos maiores em cerca de 300 a 500 milissegundos e entradas de texto em posts ou vídeos em torno de meio segundo a um segundo.

### Qual suavização devo usar?

Ease out para o que entra, ease in para o que sai, ease in e out para o que se move dentro do quadro e linear para loops contínuos.

### Quais são os 12 princípios da animação?

São princípios da animação de personagens descritos pelos animadores da Disney Frank Thomas e Ollie Johnston em The Illusion of Life. O tempo e a suavização, que eles chamam de slow in e slow out, são os que mais se transferem diretamente para o movimento no design.