Gerador Bézier Cúbico

Digitar cube-bezier(x1, y1, x2, y2) manualmente e recarregar a página para verificar a sensação é uma maneira lenta de ajustar uma animação. Este gerador fecha esse loop: arraste a alça do ponto de controle na curva ou digite números exatos nos campos x1/y1/x2/y2, e a curva, a string CSS copiável e a visualização da animação ao vivo são atualizadas a cada alteração - sem etapa de construção, sem recarga.

Os dois eixos funcionam de maneira diferente de propósito. x1 e x2 permanecem entre 0 e 1, porque é isso que a especificação CSS realmente exige de uma função de temporização cube-bezier() — um valor fora desse intervalo é simplesmente inválido. y1 e y2 não têm esse limite: arraste uma alça acima da parte superior da caixa ou abaixo da parte inferior, e a curva ultrapassa seu início ou fim, que é exatamente como os efeitos de primavera e estilo de salto são construídos a partir de uma única curva de atenuação.

Ver um número não é o mesmo que ver o movimento, então a visualização executa duas bolas idênticas lado a lado em um loop: uma se move usando sua curva personalizada, a outra se move em um ritmo linear constante. Observá-los correr é a maneira mais rápida de saber se uma curva de atenuação realmente produz a sensação que você deseja, antes mesmo de chegar a uma folha de estilo. As páginas predefinidas - os números reais por trás da própria palavra-chave easy-in-out do CSS, uma aproximação honesta de overshoot que alguns chamam de rejeição e a curva padrão do Material Design publicada pelo Google - são pontos de partida prontos que você pode arrastar em vez de pontos de controle em branco.

Tudo é executado localmente no seu navegador: sem upload, sem conta, sem ida e volta do servidor, e o gerador continua funcionando offline depois que a página é carregada.