Gerador de curvas de easing cubic-bezier
Desenha curvas de easing cubic-bezier de CSS com dois pontos de controlo arrastáveis, predefinições, uma pré-visualização de animação em direto e código pronto a copiar, tudo no teu navegador.
A carregar Gerador de curvas de easing cubic-bezier… Se nada acontecer, ativa o JavaScript.
O easing é o que separa uma animação que parece viva de uma que parece mecânica. No mundo real nada se move a velocidade constante: os objetos aceleram ao arrancar, abrandam ao parar e por vezes ultrapassam o alvo antes de assentar. O CSS capta isto com a função de temporização, e a função de temporização mais flexível é cubic-bezier, que te permite descrever uma curva de aceleração inteira com apenas quatro números. Esses números definem os dois pontos de controlo de uma curva de Bezier cujo eixo horizontal é o tempo e cujo eixo vertical é o progresso, e a forma dessa curva dita exatamente como um elemento acelera e abranda ao longo de uma transição ou animação.
Perguntas frequentes
É enviado alguma coisa quando crio uma curva de easing?
O que significam os quatro números de cubic-bezier?
Porque posso arrastar as pegas para cima do topo ou para baixo do fundo, mas não para a esquerda ou direita da caixa?
Qual é a diferença entre ease-in, ease-out e ease-in-out?
Como crio um efeito com ressalto ou mola?
A pré-visualização mostra o movimento real?
Onde uso o valor gerado no meu CSS?
As curvas cubic-bezier personalizadas funcionam em todos os navegadores?
Sobre Gerador de curvas de easing cubic-bezier
O problema com cubic-bezier é que os quatro números são quase impossíveis de imaginar na tua cabeça. Um valor como cubic-bezier(0.68, -0.55, 0.27, 1.55) não significa nada até veres a curva que desenha e o movimento que produz. Este gerador torna isso concreto. Mostra a curva numa grelha interativa com dois pontos de controlo arrastáveis ligados a eventos de ponteiro, por isso podes puxar as pegas com um rato ou com um dedo e ver a curva remodelar-se em tempo real. A posição horizontal de cada pega está limitada ao intervalo válido de zero a um exigido pela especificação de CSS, enquanto a posição vertical é livre, que é o que permite os efeitos de antecipação e ultrapassagem em que o progresso desce abaixo de zero ou sobe acima de um.
Uma fila de predefinições oferece-te as palavras-chave de CSS com nome como pontos de partida: linear para velocidade constante, ease para o valor predefinido suave, e ease-in, ease-out e ease-in-out para os padrões de aceleração comuns. A partir de qualquer predefinição podes arrastar as pegas para afinar a sensação. É crucial que a ferramenta inclua uma pré-visualização em direto: clica na pista ou no botão de reprodução e um marcador anima-se ao longo dela usando a tua curva exata, de modo a que julgues o movimento pela forma como ele se move de facto e não pela geometria da linha. O valor cubic-bezier gerado e uma declaração CSS completa atualizam-se continuamente e copiam-se para a área de transferência com um só clique.
A ferramenta inteira corre localmente no teu navegador. Não há nada para enviar, nenhuma conta e nenhum rastreio, e continua a funcionar sem ligação assim que a página é carregada, porque toda a tarefa consiste em calcular uma curva e produzir uma breve cadeia de CSS. A combinação de uma curva visível, pontos arrastáveis, predefinições com nome e uma pré-visualização de movimento real transforma a abstrata sintaxe cubic-bezier de quatro números em algo a que podes chegar pelo tato, que é o caminho mais rápido para um easing que pareça certo na tua interface.
Das carroçarias de automóveis à animação web: a longa vida da curva de Bezier
A matemática por trás de cada curva de easing de CSS não foi desenvolvida para os ecrãs, mas para a chapa metálica. No final dos anos 50 e nos anos 60, os fabricantes de automóveis franceses Renault e Citroen precisavam de uma forma precisa de descrever as superfícies suaves e fluidas das carroçarias para as poderem maquinar com exatidão. Pierre Bezier, um engenheiro da Renault, popularizou e publicou as curvas que agora têm o seu nome, enquanto Paul de Casteljau, a trabalhar em segredo na Citroen, desenvolveu de forma independente as mesmas ideias e o elegante algoritmo para as avaliar. Como o trabalho de de Casteljau foi mantido confidencial, as curvas ficaram conhecidas como curvas de Bezier.
A ideia central é que uma curva complexa pode ser definida por um pequeno número de pontos de controlo, em que a curva passa pelos extremos e é atraída para, mas não através de, os pontos intermédios. Isto tornou as curvas de Bezier perfeitas para o campo emergente da computação gráfica. Tornaram-se a base do desenho vetorial em PostScript e PDF, da ferramenta caneta em todos os programas de ilustração, dos contornos dos tipos de letra que estás a ler neste momento e das trajetórias de movimento no software de animação. Um punhado de pontos de controlo pode descrever quase qualquer forma ou movimento suave, que é precisamente a economia que os engenheiros dos anos 60 procuravam.
O CSS adotou uma curva cúbica de Bezier, uma com dois pontos de controlo entre extremos fixos, como a sua função de temporização porque capta todo o vocabulário do movimento natural com apenas quatro números. As palavras-chave com nome não são mecanismos separados, mas simplesmente rótulos cómodos para valores cubic-bezier específicos: ease é cubic-bezier(0.25, 0.1, 0.25, 1), e linear é cubic-bezier(0, 0, 1, 1). Quando arrastas as pegas numa ferramenta como esta, estás a manipular os mesmos pontos de controlo que um engenheiro automóvel usou um dia para moldar um guarda-lamas, dobrando agora o tempo e o progresso em vez do metal para tornar uma interface recetiva e viva.