Editor Cubic Bezier

O que faz o Editor Cubic Bezier

O Editor Cubic Bezier ajuda a criar funções de easing CSS editando os dois pontos de controlo que definem uma curva cubic-bezier. É útil para afinar transições, efeitos de hover, animações de modais, carrosséis, estados de carregamento e microinterações em que os valores predefinidos ease, ease-in ou ease-out não parecem certos. A curva é apresentada num SVG com pegas arrastáveis, campos numéricos, saída CSS em direto e um pequeno ponto animado que pré-visualiza a temporização. O valor gerado tem a forma cubic-bezier(x1, y1, x2, y2) e pode ser colado em transition-timing-function ou animation-timing-function.

Os valores x estão limitados entre zero e um porque as funções de temporização CSS exigem esse intervalo. Os valores y podem sair do intervalo de zero a um, permitindo efeitos de ultrapassagem e antecipação quando o design pede um movimento elástico ou enfatizado. A manipulação direta e a introdução numérica funcionam em conjunto, por isso pode esboçar uma sensação visualmente e depois afinar os números exatos.

Fluxo de trabalho privado no navegador

Todo o processamento acontece no seu navegador com JavaScript do lado do cliente. A ferramenta não envia excertos, valores de configuração, dados gerados, texto de consultas ou exemplos copiados para um servidor e não exige conta. Este modelo exclusivamente local é importante nos utilitários para programadores, porque o conteúdo colado parece muitas vezes dados reais de aplicações: respostas de API, registos, exemplos com aspeto de variáveis de ambiente, consultas a bases de dados, marcação de rascunhos ou valores copiados de sessões de depuração em produção. Manter a transformação local reduz o risco e mantém a interação rápida, porque não há qualquer pedido de rede.

A interface é propositadamente compacta para que possa colar a entrada, ajustar opções, inspecionar a saída, copiá-la e regressar ao editor. Os resultados devem, ainda assim, ser revistos antes de serem submetidos, partilhados publicamente ou usados num fluxo de produção. As ferramentas do navegador são excelentes para inspeção e preparação rápidas, mas não conseguem conhecer todas as convenções de um projeto, regras de classificação de dados ou requisitos de validação específicos de uma aplicação.

Dicas práticas

Use easings subtis nas transições de interface que devem parecer reativas e não distrativas. Ultrapassagens grandes podem parecer divertidas em componentes de marketing, mas lentas em formulários, menus e ferramentas de produtividade. Teste as animações com conteúdo real, com as definições de movimento reduzido e em dispositivos mais lentos antes de padronizar uma função de temporização num sistema de design. Combine o easing com uma duração adequada, porque uma boa curva não consegue salvar uma animação demasiado lenta para uma ação frequente ou demasiado rápida para os utilizadores a compreenderem.