Interpolación de color Bézier cúbica

Indique los colores inicial y final, una fracción entre cero y uno y las cuatro coordenadas de control empleadas por el easing cubic-bezier de CSS. El resultado incluye la fracción suavizada, los colores normalizados, el valor hexadecimal y los canales RGB, para que las transiciones sean reproducibles en herramientas de diseño, procesos de animación, pruebas y recursos generados sin depender del reloj de animación de un navegador.

Separe el avance temporal del avance visual del color

Una mezcla lineal interpreta el cincuenta por ciento del tiempo transcurrido como el cincuenta por ciento de la distancia entre dos colores. Las interfaces reales suelen necesitar otro ritmo: una transición puede comenzar con suavidad, acelerarse en el centro y detenerse gradualmente al acercarse al destino. Esta capacidad aplica una curva temporal Bézier cúbica antes de mezclar los canales RGB. La entrada t sigue siendo la fracción de la línea temporal, mientras que eased_t muestra la fracción de color producida por la curva. Esta distinción facilita la inspección y reutilización del resultado. En el instante cero se devuelve el color inicial y en el instante uno se devuelve el final. Entre ambos extremos, la curva determina la rapidez con la que avanzan los canales. Como la operación recibe números explícitos y no consulta ningún reloj, las solicitudes idénticas producen la misma salida. Esto resulta útil cuando un renderizador, exportador de diseño, conjunto de pruebas o proceso de compilación debe coincidir en un fotograma de transición sin ejecutar una animación ni estimar qué mostró un navegador en un instante concreto.

Cómo se resuelve la fracción Bézier cúbica

Una curva Bézier cúbica al estilo de CSS comienza en cero, termina en uno y posee dos puntos de control definidos por quien realiza la llamada. La fracción temporal solicitada pertenece al eje x de la curva, por lo que evaluar directamente el polinomio y con ese mismo número sería incorrecto para la mayoría de las curvas. La calculadora encuentra primero el parámetro interno cuyo valor x coincide con la fracción solicitada. Utiliza una búsqueda de Newton acotada cuando la pendiente es adecuada y una bisección de cantidad fija como alternativa estable. Después evalúa la coordenada y en el parámetro obtenido. Las coordenadas x de control deben estar entre cero y uno; así el tiempo permanece monótono y la respuesta es única. Las coordenadas y pueden ir de menos diez a diez, lo que permite curvas con anticipación y sobreimpulso. Si el easing sale del intervalo normal, los canales RGB interpolados se limitan a bytes válidos. Los decimales se redondean de forma uniforme y los canales al entero más cercano. Estas reglas evitan depender del motor del navegador, la frecuencia de fotogramas o el muestreo de animación de cada plataforma.

Elija las entradas y utilice el color devuelto

Escriba cada color con tres o seis dígitos hexadecimales, precedidos opcionalmente por una almohadilla. Los colores abreviados se expanden y todos los valores aceptados se devuelven normalizados con seis dígitos en minúsculas. Proporcione t entre cero y uno y, a continuación, x1, y1, x2 e y2 en el orden habitual de cubic-bezier. Por ejemplo, la forma ease-in-out común utiliza 0.42, 0, 0.58 y 1. La respuesta conserva los extremos normalizados y la curva, expone la fracción suavizada calculada y entrega tanto un color hexadecimal como canales rojo, verde y azul separados. Utilice el hexadecimal en CSS, SVG, tokens de diseño o instrucciones de imagen; use el objeto de canales cuando prefiera datos numéricos estructurados. Para obtener una secuencia de fotogramas, repita la operación con fracciones temporales uniformes y mantenga constantes los extremos y controles. La validación rechaza colores mal formados, números no finitos, fracciones fuera de la línea temporal, controles x no monótonos y controles y excesivos, por lo que una configuración inválida no puede generar silenciosamente una muestra engañosa.