Interpolação de cor Bézier cúbica

Informe as cores inicial e final, uma fração de zero a um e as quatro coordenadas de controle usadas pelo easing cubic-bezier do CSS. O resultado inclui a fração suavizada, cores normalizadas, saída hexadecimal e canais RGB, permitindo reproduzir transições em ferramentas de design, pipelines de animação, testes e ativos gerados sem depender do relógio de animação do navegador.

Separe o progresso do tempo do progresso visual da cor

Uma mistura linear trata cinquenta por cento do tempo decorrido como cinquenta por cento da distância entre duas cores. Interfaces reais frequentemente exigem outro ritmo: uma transição pode começar suavemente, acelerar no meio e desacelerar perto do destino. Esta capacidade aplica uma curva de tempo Bézier cúbica antes de misturar os canais RGB. A entrada t continua sendo a fração da linha do tempo, enquanto eased_t informa a fração de cor produzida pela curva. Essa distinção torna o resultado fácil de inspecionar e reutilizar. No tempo zero, a cor inicial é retornada; no tempo um, a cor final é retornada. Entre esses extremos, a curva controla a velocidade de avanço dos canais. Como a operação recebe números explícitos e não consulta um relógio, solicitações repetidas com entradas idênticas produzem saídas idênticas. Isso é útil quando um renderizador, exportador de design, suíte de testes ou processo de build precisa concordar sobre um quadro de transição sem executar uma animação nem estimar o que o navegador exibiu em determinado instante.

Como a fração Bézier cúbica é resolvida

Uma curva Bézier cúbica no estilo CSS começa em zero, termina em um e possui dois pontos de controle fornecidos por quem faz a chamada. A fração solicitada pertence ao eixo x da curva; portanto, avaliar o polinômio y diretamente com o mesmo número estaria errado para a maioria das curvas. A calculadora primeiro encontra o parâmetro interno cujo valor x corresponde à fração pedida. Ela usa uma busca de Newton limitada quando a inclinação é adequada e uma busca por bisseção com quantidade fixa de passos como alternativa estável. Em seguida, avalia a coordenada y no parâmetro encontrado. As coordenadas x de controle devem ficar entre zero e um, mantendo o tempo monotônico e garantindo uma resposta única. Os controles y podem variar de menos dez a dez, permitindo curvas com antecipação e overshoot. Quando o easing ultrapassa o intervalo normal, os canais RGB interpolados são limitados a bytes válidos. Os decimais exibidos recebem arredondamento consistente, e os canais usam o inteiro mais próximo. Essas regras eliminam a dependência de motores de navegador, taxas de quadros e amostragem de animação específica de cada plataforma.

Escolha as entradas e use a cor retornada

Digite cada cor com três ou seis algarismos hexadecimais, opcionalmente precedidos por cerquilha. Cores abreviadas são expandidas, e toda cor aceita retorna normalizada com seis algarismos minúsculos. Forneça t entre zero e um; depois, informe x1, y1, x2 e y2 na ordem familiar de cubic-bezier. Por exemplo, a forma ease-in-out comum usa 0.42, 0, 0.58 e 1. A resposta preserva os extremos normalizados e a curva, mostra a fração suavizada calculada e fornece tanto uma cor hexadecimal quanto canais vermelho, verde e azul separados. Use o valor hexadecimal em CSS, SVG, tokens de design ou instruções de imagem; use o objeto de canais quando dados numéricos estruturados forem preferíveis. Para criar uma sequência de quadros, repita a operação com frações de tempo uniformemente espaçadas, mantendo extremos e controles constantes. A validação rejeita cores malformadas, números não finitos, frações fora da linha do tempo, controles x não monotônicos e controles y excessivos; assim, uma configuração inválida não produz silenciosamente uma amostra enganosa.