Jumps: o novo steps() em Web Animation

Jumps (“saltos”) são os novos valores possíveis para steps(), a função CSS de controle de animações. Os novos valores jump- auxiliar nas animações web com CSS e poupam ter que fazer cálculos mais complexos.

A primeira grande mudança para easings em animações web (também conhecida como time functions ou funções de temporização) chegou. Após algumas discussões, atualizações na especificação e implementações iniciais como uma função separada, o Firefox 65 apresenta 4 novas opções para a função steps():

• jump-start
• jump-end
• jump-both
• jump-none

Como esses novos valores de step() se comparam ao que já tivemos e quando são os melhores momentos para usar cada um deles?

Easings e a função steps()

Primeiro, é preciso dar um passo atrás e discutir o que são os easings e o que a função steps() permite fazer.

Easings permitem alterar a forma como uma transition, CSS animation ou uma animação Web Animations API é concluída ao longo do tempo.

Com um easing linear, tudo se move a um ritmo constante. Mudando isso para ease-in, obtém-se algo que começa mais devagar e acelera à medida que chega ao fim da animação.

Com Steps, as coisas são um pouco diferentes, já que é possível passar instruções para que a animação tenha um número específico de frames distintos. Assim, alterar o easing para steps(2), por exemplo, daria uma animação com apenas 2 estados, uma posição inicial e uma final.

Como steps() determina cada intervalo de cada step é baseado em um segundo parâmetro (opcional) . É aqui que os novos valores entram em ação e unem os 2 valores existentes start e end.

Inícios e Fins (jump-start e jump-end)

Em vez de aprofundar no que significa start e end, vamos direto ao ponto e dizer que 2 dos 4 valores mencionados acima são de fato aliases desses valores originais:

• jump-start === start
• jump-end === end

O prefixo jump ajuda a explicar as palavras “start” e “end” de forma mais eficaz. Quando usamos start ou jump-start, estamos dizendo ao cálculo para pular a posição inicial; com end/jump-end, para pular a posição final.

Você pode pensar que a função steps(n) funciona tirando snapshots de uma animação com um ajuste linear em intervalos específicos e não exibe cada snapshot até a hora de mostrar o próximo.

Então, quando passamos a instrução steps(4, jump-end), isso acarreta em uma animação “dividida” em 4 seções e captura um snapshot com a posição inicial em cada um desses quartos. Com steps(5, jump-start), a animação é dividida em 5 partes e tomamos a posição final em cada parte.

Mas por que alguém iria querer pular um estado inicial ou final? O comanda está dizendo ao navegador para ir de um estado específico para outro estado específico diferente com os keyframes da animação, então, não se iria querer sempre ambos os estados presentes na animação resultante?

Rotações

Fica mais claro perceber os benefícios de pular um início ou fim quando você pensa no ponteiro dos segundos em um relógio: uma animação em execução por 60 segundos para uma rotação completa (0deg a 360deg) e um easing steps(60). Isso resulta em um relógio com ponteiro de segundos que avança para cada marca no relógio (jump-end/end é assumido quando nenhum segundo parâmetro é especificado).

Sem o salto (jumping) do estado final, teríamos uma animação onde o início e o fim estariam no topo (0deg) e, assim, o relógio não seria natural, pois ficaria no topo por 2 segundos e faria os 58 segundos restantes.

Sprites

Outra razão importante é animar com sprites. Você pode ter frames para animar e transformar a posição de translateX(0) para translate(-100%) (ou usar background-position etc). Se você usar um total de 100% da largura, o estado final ficará fora da view, então, novamente, pula-se o final para ser possível capturar magicamente cada frame.

Isso poupa a necessidade de ter que fazer cálculos extras para evitar que o quadro final (em branco) apareça.

Sem saltos (jump-none)

Às vezes, pular um estado realmente não é o que é preciso fazer. A nova opção jump-none permite uma animação que não salta o início ou o fim.

Para qualquer animação com uma contagem de steps de pelo menos 2, o estado inicial e o estado final serão representados. As etapas restantes serão distribuídas uniformemente entre o início e o fim. 3 steps terão seus “snapshots” tirados em 0%, 50% e 100%.

Mover um objeto

Um caso simples para essa opção é mover um objeto pela tela. É possível mover um objeto do ponto A para o ponto B com um efeito passo-a-passo. Antes, apenas com o salto de start ou end disponível, não havia uma maneira direta de informar à animação para mostrar as posições inicial e final com frames iguais.

A adição de jump-none agora nos dá essa habilidade.

Com as antigas formas de steps(), ainda seria possível fazer isso, mas seria preciso algum cálculo extra e fazer o translation tecnicamente ir além de seu estado inicial ou final. Agora, é mais simples, já que é possível ter certeza de que os estados inicial e final são o que explicitamente se fez deles.

Opacidade

A opacidade também pode se beneficiar ao garantir que os estados inicial e final estejam sempre visíveis. Digamos que seja preciso um fade out através de uma animação de opacidade escalonada de 1 a 0. Com start ou end, o estado totalmente opaco ou totalmente transparente nunca será visto. Mas jump-none certifica que ambos sejam vistos.

Uma animação com steps(2, jump-none) terá uma animação de liga/desliga direta e steps(4,jump-none) resultará em opacidades de 1, .6667, .3333 and 0.

Saltando ambos (jump-both)

Mostramos saltos em início, fim e ambos, o que nos deixa agora com o salto de ambos.

Por um lado, pular ambos permite a completude (já que estamos adicionando none, também podemos adicionar both), mas também tem potencial, já que as opções de easing podem ser usadas fora da animação.

Os casos de uso para usar easings no contexto de gradientes parecem mais convincentes do que o jump-both fornece no contexto da animação.

Conclusão sobre jumps em animação CSS

Na data de publicação deste artigo, o Chrome já implementou o comportamento jump-none sob a discussão de especificações antigas de frames(), então, é possível suspeitar que não será um grande sacrifício movê-lo para a nova nomenclatura. Webkit e EdgeHTML ainda não o possuem em nenhuma versão.

Então, essa é a hora de se familiarizar e experimentar ao invés de começar a usar como se não houvesse amanhã enquanto ainda estamos sem fallbacks.