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, 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.

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.

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.

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

1. 1

   O fundo assenta

   O campo já se move devagar quando a publicação aparece. Cria o ambiente sem pedir para ser lido.

2. 2

   O título entra

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

3. 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. 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 explica como o planear.

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.

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

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 e publicações animadas mostram-nos em ação.