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

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.

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.

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.

.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 */
}

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 trata da versão estática da mesma ideia.

1. 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. 2

   O título entra

   Uma entrada clara, suavizada com ease out, em menos de um segundo.

3. 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. 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 explica como planejar isso.

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.

: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;
  }
}

Aplique os mesmos princípios ao animar um logo, um post ou o destaque de um site. Logos animados e posts animados mostram tudo isso em ação.