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

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

Não precisas de ser animador para criar movimento que parece certo. Precisas de alguns princípios, meia dúzia de durações e disciplina para usar menos.

## The short version

- Um bom motion design assenta em cinco princípios: dar um propósito a cada movimento, acertar o ritmo, usar easing, ordená-lo por importância e usar o mínimo possível.
- Os pequenos movimentos de interface costumam parecer certos entre cerca de 150 e 300 milissegundos, enquanto os movimentos maiores e as entradas precisam de mais tempo.
- O que entra deve desacelerar, o que sai deve acelerar e os loops contínuos devem mover-se a um ritmo constante.
- Quando vários elementos se movem, o mais importante deve mover-se 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 easing mantém o movimento de uma marca coerente 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, definidos pelos animadores da Disney Frank Thomas e Ollie Johnston em *The Illusion of Life*. Para trabalho de design, como publicações, sites, logótipos e apresentações, cinco fazem quase todo o trabalho: **propósito, ritmo, easing, hierarquia e contenção**. Podes usá-los sem nunca abrir uma aplicação de animação.

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

O movimento faz barulho. Tudo o que se move puxa o olhar, por isso mover algo é afirmar que isso importa agora. Antes de animares, dá nome à função. Se não conseguires, deixa-o parado.

### Movimento com função

- Leva o olhar para a única coisa a ler primeiro
- Mostra de onde algo veio ou para onde foi
- Confirma uma ação: enviado, guardado, adicionado
- Cria um ambiente com um fundo lento

### Movimento por si só

- Todos os elementos a entrar aos saltos
- Texto que continua a mexer-se enquanto o lês
- Logótipos a rodar e botões a pulsar
- Transições que te obrigam a esperar

## Ritmo: quanto tempo deve durar o movimento

A duração é o princípio que mais gente erra, normalmente sendo lenta demais nas coisas pequenas e rápida demais nas grandes. Duas regras ajudam. Os movimentos pequenos e frequentes devem ser rápidos, porque as pessoas veem-nos a toda a hora. Os movimentos que percorrem mais distância ou mudam mais devem demorar mais, porque o olho precisa de tempo para acompanhar.

| Tipo de movimento | Duração típica | Porquê |
| --- | --- | --- |
| Resposta de botões e interruptores | Cerca de 100 a 200 ms | Parece instantâneo, mas continua visível |
| Pequenas mudanças de interface, menus | Cerca de 200 a 300 ms | Rápido o suficiente 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 a entrar numa publicação ou vídeo | Cerca de 0,4 a 1 s | Tempo suficiente para se perceber como uma entrada |
| Fundo a deslizar em loop | Muitos segundos por ciclo | Ambiente, não informação: deve passar quase despercebido |

Intervalos de partida comuns em interfaces e motion design. Testa no dispositivo real e ajusta.

Um teste útil: se as pessoas reparam na animação em si e não no que ela mostra, é lenta ou grande demais. Se não dão pela mudança, é rápida demais.

## Easing: porque é que nada se deve mover a velocidade constante

Os objetos reais aceleram e abrandam. Um movimento a uma velocidade constante, chamado linear, parece mecânico porque nada no mundo se move assim. As curvas de easing acrescentam aceleração e desaceleração, e escolher a certa é simples quando conheces três casos.

- **Entrar: ease out.** Chega depressa e assenta com suavidade, como um carro a estacionar. A maioria das entradas usa isto.
- **Sair: ease in.** Começa com suavidade e acelera para fora. As saídas também podem ser mais curtas do que as entradas.
- **Mover-se dentro do enquadramento: ease in and out.** Começa e para com suavidade.
- **Loops e rotações: linear.** O movimento contínuo deve manter um ritmo constante, ou vai parecer hesitar na junção.

```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. [Easing, explicado](https://gradiently.design/pt-pt/guide/easing) aprofunda as curvas.

## Hierarquia: move primeiro o que é importante

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

Uma story vertical a anunciar a coleção de primavera, com uma pequena etiqueta por cima e uma linha de pormenores por baixo

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

1. **O fundo assenta** O campo já se move devagar quando a publicação aparece. Cria o ambiente sem pedir para ser lido.
2. **O título entra** Uma entrada clara, com ease out, em menos de um segundo.
3. **As linhas de apoio seguem-se** A etiqueta e os pormenores chegam logo a seguir, por ordem de leitura, com um movimento mais pequeno.
4. **Tudo fica parado** As palavras param e ficam quietas tempo suficiente para serem lidas. Só o fundo continua a mexer-se.

## Contenção: usa menos movimento do que pensas

É a quietude que dá sentido ao movimento. Se tudo se move, nada se destaca, e o design parece ansioso. Escolhe um movimento principal por peça, mantém as distâncias curtas e deixa as palavras quietas depois de chegarem. A contenção também tem a ver com as pessoas: algumas acham o movimento desconfortável ou até enjoativo, por isso cada peça deve funcionar com o movimento desligado. [Movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion) explica como o planear.

> **O teste do fotograma parado** Pausa a tua animação em qualquer fotograma. Se esse fotograma não parecer um design acabado, o movimento está a disfarçar uma composição fraca.

## Coerência: um pequeno sistema de movimento

As marcas mantêm as cores e os tipos de letra coerentes; o movimento merece o mesmo cuidado. Escreve um sistema minúsculo e reutiliza-o: três durações, duas ou três curvas de easing e um movimento da casa para os fundos. Impede que cada peça nova invente a sua própria velocidade e torna o teu movimento reconhecível, como descreve [movimento para marcas estáticas](https://gradiently.design/pt-pt/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 design tokens. Tudo usa estes nomes, e o movimento reduzido encurta-os todos num só sítio.

Aplica os mesmos princípios quando animas um logótipo, uma publicação ou a secção de destaque de um site. [Logótipos animados](https://gradiently.design/pt-pt/guide/animated-logo) e [publicações animadas](https://gradiently.design/pt-pt/guide/animated-social-posts) mostram-nos em ação.

## FAQ

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

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

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

A resposta de pequenos elementos de interface funciona normalmente com cerca de 100 a 300 milissegundos, os movimentos maiores com cerca de 300 a 500 milissegundos e as entradas de texto em publicações ou vídeo com cerca de meio segundo a um segundo.

### Que easing devo usar?

Ease out para o que entra, ease in para o que sai, ease in and out para o que se move dentro do enquadramento 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 ritmo e o easing, a que chamam slow in e slow out, são os que passam mais diretamente para o movimento em design.