Criar curvas de animação complexas em CSS com a função de easing linear()

Apresentamos a linear(), uma função de easing no CSS que interpola linearmente entre os pontos, permitindo recriar efeitos de salto e mola.

Bramus

Ações de transição no CSS

Ao animar ou fazer a transição de elementos no CSS, você controla a taxa em que um valor muda com uma função de suavização usando as propriedades animation-timing-function e transition-timing-function.

Há várias palavras-chave disponíveis como predefinições no CSS, a saber, linear, ease, ease-in, ease-out e ease-in-out. Para criar suas próprias curvas de transição, use a função cubic-bezier() ou use a abordagem baseada em etapas usando a função de transição steps().

Observação:saiba mais sobre essas funções e palavras-chave de suavização em Aprenda CSS: animações.

Quando usados de maneira adequada, os easings dão a um elemento animado uma sensação de peso, já que ele parece ganhar impulso.

Não é possível criar curvas complexas, como efeitos de salto ou mola, no CSS, mas, graças a linear(), agora é possível fazer aproximações surpreendentes.

Introdução ao linear()

Compatibilidade com navegadores

• 113
• 113
• 112
• 17.2

Uma nova maneira de definir uma transição suave no CSS é com linear(). Essa função aceita várias paradas, separadas por vírgulas. Cada parada é um único número que varia de 0 a 1. Entre cada parada, a interpolação é feita de maneira linear, explicando o nome da função.

animation-timing-function: linear(0, 0.25, 1);

Por padrão, essas paradas são espalhadas de forma equidistante. No snippet anterior, isso significa que o valor de saída de 0.25 será usado na marca de 50%.

O gráfico de linear(0, 0.25, 1) fica assim:

Se você não quiser que as paradas sejam espalhadas de forma equidistante, transmita uma comprimento de parada. Ao transmitir um valor como uma duração de parada, você define o ponto de partida:

animation-timing-function: linear(0, 0.25 75%, 1);

Aqui, um valor de saída de 0.25 não será usado na marca 50%, mas em 75%.

Ao especificar dois valores como uma duração de parada, você define o ponto inicial e o final:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Um valor de saída de 0,25 será usado de 25% a 75% no tempo.

Como criar curvas complexas com linear()

Embora os exemplos acima sejam transições muito simples, você pode usar linear() para recriar funções de transição complexas de maneira muito simples, com a perda de precisão.

Considere esta curva de suavização de salto, um tipo de suavização que não pode ser expressa diretamente no CSS, definida usando JavaScript:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Embora o código não diga muito, uma visualização pode. Confira a saída, visualizada como uma curva azul:

A curva pode ser simplificada adicionando várias paradas a ela. Aqui, cada ponto verde indica uma parada:

Quando transmitida para linear(), o resultado é uma curva que se parece com a original, mas é um pouco mais áspera nas bordas.

Compare a caixa verde animada com a azul. Ela não é tão suave.

No entanto, se você adicionar paradas suficientes, poderá aproximar a curva original. Confira uma versão atualizada:

Basta dobrar o número de paradas para ter um resultado tranquilo.

O código usado para animar tem esta aparência:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Uma ferramenta para ajudar

Criar essa lista de paradas manualmente seria muito trabalhoso. Felizmente, Jake e Adam criaram uma ferramenta para ajudar você a converter uma curva de transição para a versão linear().

Captura de tela de https://linear-easing-generator.netlify.app/ em ação.

A ferramenta usa uma função de suavização JavaScript ou uma curva SVG como entrada e gera a curva simplificada usando linear(). Use os controles deslizantes para controlar o número de paradas e a precisão delas.

No canto superior direito, você também pode escolher uma das predefinições: "Spring", "Bounce", "Simple elastic" ou "Material Design" com suavização enfatizada.

Suporte ao DevTools

O DevTools oferece suporte para visualizar e editar o resultado de linear(). Clique no ícone para mostrar uma dica interativa que permite arrastar as paradas.

Captura de tela do editor "linear()" do Chrome DevTools.

Esse recurso está disponível no Chrome DevTools 114.

Foto de Howie Mapson no Unsplash