Easing explicado: porque é que o bom movimento parece natural

O easing é a forma como a velocidade de um movimento muda enquanto decorre. Sem easing, um objeto move-se a uma velocidade constante e pára de repente, o que parece mecânico. Com easing, acelera e desacelera como as coisas reais: uma gaveta desliza depressa e assenta, uma bola ganha velocidade ao cair. Escolher o easing certo é a forma mais rápida de fazer qualquer animação parecer natural.

Como se vê o easing

Os animadores desenham o easing como um gráfico de espaçamento: onde um objeto está em passos de tempo iguais. Quando as marcas estão igualmente espaçadas, a velocidade é constante. Quando se juntam, o objeto move-se devagar; quando se afastam, move-se depressa. Aqui estão os quatro easings básicos, cada um a mostrar onze momentos iguais do mesmo movimento, da esquerda para a direita.

Os quatro easings de que realmente precisas

O CSS nomeia cinco curvas básicas, e as ferramentas de design usam as mesmas ideias com nomes parecidos. Quatro delas cobrem quase todos os trabalhos. A quinta, ease, é a predefinição do navegador: uma curva que começa bastante rápida e assenta com suavidade, muito como um ease-out mais brando.

A lógica é física. Algo que chega já deve estar em movimento quando aparece e depois assentar, por isso faz ease-out. Algo que sai deve ganhar velocidade ao ir-se embora, por isso faz ease-in. O linear é errado para um movimento isolado, mas certo para tudo o que é contínuo: um ciclo com easing nas pontas parece hesitar de cada vez que se repete, como explicam os ciclos contínuos.

Como funcionam as curvas cubic-bezier

Cada curva de easing em CSS é desenhada entre dois pontos fixos, o início (0, 0) e o fim (1, 1). Um cubic-bezier() acrescenta dois pontos de controlo que dobram a curva. O eixo horizontal é o tempo e o vertical é o progresso. Os valores de tempo têm de ficar entre 0 e 1, mas os valores de progresso podem ir além, o que faz um movimento ultrapassar o alvo e voltar.

/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Exits: shorter and easing in */
.card-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}

A referência da MDN sobre funções de easing lista todas as formas que o CSS aceita, incluindo steps() para movimento fotograma a fotograma.

Molas: easing vindo da física

Uma mola não usa uma curva fixa nem uma duração. Descreves antes a física, normalmente a rigidez (com que força puxa para o alvo), o amortecimento (com que rapidez se acalma) e a massa, e o movimento resulta daí. As molas rígidas e bem amortecidas parecem ágeis e precisas; as soltas e pouco amortecidas ressaltam. As molas são populares em interfaces de apps porque respondem com naturalidade quando um movimento é interrompido a meio.

Muitas bibliotecas de animação oferecem molas diretamente. Em CSS simples, a função linear() consegue aproximar uma listando pontos ao longo do seu percurso, o que os navegadores modernos suportam.

/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
  transition: transform 500ms
    linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}

Easing e duração trabalham juntos

A mesma curva sente-se diferente em durações diferentes. Um ease-out de 150 milissegundos lê-se como um estalido nítido; em 800 lê-se como um deslizar lento. Ajusta ambos à distância e à função. Os princípios de design de movimento têm durações típicas.

Easing em JavaScript, ferramentas de design e vídeo

As mesmas curvas funcionam fora do CSS. Em JavaScript, a Web Animations API aceita uma cadeia de easing CSS. As ferramentas de design e de vídeo usam as mesmas ideias com nomes como ease in, ease out e ease in and out, normalmente com um editor de gráficos para curvas personalizadas e, em muitas ferramentas de prototipagem, predefinições de mola.

const card = document.querySelector('.card')

card.animate(
  [
    { transform: 'translateY(24px)', opacity: 0 },
    { transform: 'translateY(0)', opacity: 1 },
  ],
  { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)

Seja qual for a curva, algumas pessoas preferem menos movimento. Respeita essa definição encurtando ou removendo o movimento; o guia de movimento reduzido mostra como. E para fundos em ciclo, onde o linear costuma ser o certo, vê os fundos de gradiente animados.