Gerador de curvas cubic-bezier

O que é uma curva cubic-bezier

As animações e transições em CSS precisam de uma regra que distribua o avanço ao longo do tempo. `linear` distribui-o por igual; qualquer coisa mais interessante é uma curva. `cubic-bezier(x1, y1, x2, y2)` deixa-o desenhá-la, colocando dois pontos de controlo entre um início fixo em (0, 0) e um fim fixo em (1, 1).

A especificação CSS Easing é precisa quanto ao significado dos eixos: os valores de progresso de entrada são os x da curva, e os y são os valores de progresso de saída. Ou seja, o x é quanto já decorreu da duração e o y é quanto já decorreu do movimento. Uma curva que sobe depressa no início e depois achata descreve algo que arranca rápido e desliza até parar.

As quatro palavras-chave conhecidas são apenas curvas com nome. `ease` é cubic-bezier(0,25, 0,1, 0,25, 1), `ease-in` é (0,42, 0, 1, 1), `ease-out` é (0, 0, 0,58, 1) e `ease-in-out` é (0,42, 0, 0,58, 1). Qualquer curva que arraste aqui é tão legítima quanto essas.

Como usar o gerador

1. Arraste qualquer um dos manípulos. A curva é redesenhada à medida que os move e o CSS acompanha. Os manípulos aceitam foco, por isso as setas deslocam-nos de 0,01 em 0,01 e com Shift de 0,1 em 0,1, se preferir precisão a rapidez.
2. Experimente uma predefinição, ou saia da caixa. As cinco palavras-chave do CSS estão a um clique. As duas predefinições com ressalto puxam a curva para fora do quadrado 0–1 de propósito, o que é legal e é o que faz um movimento passar do alvo e voltar.
3. Reproduza e copie. A pré-visualização anima com o CSS real, por isso é o navegador que faz a aceleração e está a ver a coisa verdadeira, não uma reimplementação. «Copiar» dá-lhe a declaração transition-timing-function completa.

O erro de que esta página trata realmente

Uma curva de Bézier cúbica é paramétrica. Tanto o x como o y são funções de um parâmetro escondido — chamemos-lhe s — que vai de 0 a 1 e não é nem o tempo nem o avanço. Avaliar a aceleração no instante t exige por isso dois passos: resolver x(s) = t para achar s e depois devolver y(s).

Saltar essa resolução e meter o tempo diretamente como parâmetro é a forma mais comum de o código de aceleração escrito à mão correr mal, e não é um erro subtil. No `ease`, que é o valor por omissão do navegador, o atalho erra 28,74% de todo o percurso da animação, com o máximo aos 40% do caminho. No `ease-in` e no `ease-out` é 22,96%.

Há também uma armadilha ao verificar o próprio código. `ease-in-out` é quase simétrica, por isso o erro compensa-se em grande medida e fica em 2,86%, pouco o bastante para parecer uma diferença de arredondamento. E cubic-bezier(0, 0, 1, 1) é ainda pior: dá uma reta perfeita, logo parece o caso seguro para testar, e o atalho continua a errar 9,62% nela, porque ali x(s) sai 3s² − 2s³ e não s.

Na verdade o atalho só é exato para uma família de curvas: x1 = 1/3 e x2 = 2/3. São os únicos pontos de controlo que tornam x(s) a identidade e, portanto, os únicos em que o parâmetro é mesmo o tempo. Qualquer outra curva precisa da resolução.

O painel por baixo do editor mede isto para a curva que tiver montado, porque o tamanho do erro depende inteiramente da curva.

Limitações assumidas

Os valores de x são limitados a 0–1 e os de y não, e essa é a regra da especificação e não uma decisão tomada aqui: a gramática é cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>). A assimetria não é arbitrária. Com os dois controlos de x dentro do intervalo unitário, x(s) cresce sempre, pelo que cada instante corresponde a um único ponto da curva — verificado em 200 000 pares aleatórios sem um único contraexemplo. Ponha um x fora do intervalo e a garantia quebra-se, que é precisamente por isso que o CSS o rejeita. Deixar o y livre não custa nada e em troca permite o ressalto.

O ressalto é real e vale a pena vê-lo: a predefinição back-out chega a um progresso de saída de 1,0869 antes de assentar, e a back-in desce antes até −0,0969. Essas duas predefinições são convenções muito usadas, não parte do CSS, e a página identifica-as como tal.

O solucionador é Newton-Raphson com recurso à bisseção, que é o que os próprios motores dos navegadores usam. É verificado por substituição e não contra uma segunda implementação: o parâmetro devolvido é passado outra vez por x e tem de reproduzir o tempo com erro inferior a uma parte por milhão, em 40 000 curvas aleatórias e nas curvas de extremos achatados onde Newton encrava e a bisseção tem de assumir.

Este editor cobre apenas cubic-bezier. O CSS tem ainda `linear()` com paragens arbitrárias e a família `steps()`, e nenhuma delas é uma Bézier: precisam de outro editor e aqui não são aproximadas em silêncio.

48 verificações cobrem os valores das palavras-chave, o solucionador, a garantia de monotonia e o seu contraexemplo, os números de erro publicados e a formatação.

Porque é gratuito

É uma curva, um solucionador e uma caixa de texto, tudo a correr no seu navegador. Nada é enviado, não há conta, e a pré-visualização usa a animação do próprio navegador e não algo servido daqui.

O painel de medição também não é um extra pago: é a razão de ser da página.