Interpolazione colore Bézier cubica

Indichi il colore iniziale e finale, una frazione compresa tra zero e uno e le quattro coordinate di controllo usate dall’easing cubic-bezier di CSS. Il risultato include la frazione interpolata, i colori normalizzati, il valore esadecimale e i canali RGB, rendendo riproducibili le transizioni in strumenti di progettazione, pipeline di animazione, test e risorse generate senza dipendere dall’orologio di animazione del browser.

Separi l’avanzamento temporale da quello visivo del colore

Una miscelazione lineare considera il cinquanta per cento del tempo trascorso come il cinquanta per cento della distanza tra due colori. Le interfacce reali richiedono spesso un ritmo diverso: una transizione può iniziare dolcemente, accelerare nella parte centrale e rallentare vicino alla destinazione. Questa capacità applica una curva temporale di Bézier cubica prima di miscelare i canali RGB. L’input t rimane la frazione della sequenza temporale, mentre eased_t indica la frazione di colore prodotta dalla curva. Tale distinzione rende il risultato semplice da esaminare e riutilizzare. Al tempo zero viene restituito il colore iniziale e al tempo uno quello finale. Tra questi estremi, la curva controlla la velocità con cui avanzano i canali. Poiché l’operazione riceve numeri espliciti e non consulta un orologio, richieste ripetute con input identici producono output identici. È utile quando un renderer, un esportatore di design, una suite di test o un processo di build deve concordare su un fotogramma di transizione senza eseguire un’animazione né stimare ciò che il browser ha mostrato in un istante preciso.

Come viene risolta la frazione della Bézier cubica

Una curva di Bézier cubica in stile CSS parte da zero, termina a uno e possiede due punti di controllo forniti da chi effettua la chiamata. La frazione temporale richiesta appartiene all’asse x della curva, quindi valutare direttamente il polinomio y con lo stesso numero sarebbe errato per la maggior parte delle curve. Il calcolatore trova innanzitutto il parametro interno la cui coordinata x corrisponde alla frazione richiesta. Usa una ricerca di Newton limitata quando la pendenza è adatta e una ricerca per bisezione con passi fissi come alternativa stabile. Quindi valuta la coordinata y nel parametro trovato. Le coordinate x di controllo devono rimanere tra zero e uno, conservando la monotonicità del tempo e garantendo una risposta univoca. I controlli y possono variare da meno dieci a dieci, consentendo curve con anticipazione e overshoot. Se l’easing esce dall’intervallo normale, i canali RGB interpolati vengono limitati a byte validi. I decimali visualizzati sono arrotondati in modo uniforme e i canali all’intero più vicino. Queste regole eliminano la dipendenza dal motore del browser, dal frame rate e dal campionamento dell’animazione specifico della piattaforma.

Scelga gli input e utilizzi il colore restituito

Inserisca ogni colore come tre o sei cifre esadecimali, facoltativamente precedute da un cancelletto. I colori abbreviati vengono espansi e ogni colore accettato ritorna normalizzato con sei cifre minuscole. Fornisca t tra zero e uno, quindi x1, y1, x2 e y2 nel consueto ordine cubic-bezier. Per esempio, la comune forma ease-in-out usa 0.42, 0, 0.58 e 1. La risposta conserva gli estremi normalizzati e la curva, espone la frazione interpolata calcolata e fornisce sia un colore esadecimale sia i canali rosso, verde e blu separati. Usi il valore esadecimale in CSS, SVG, token di design o istruzioni per immagini; usi l’oggetto dei canali quando sono preferibili dati numerici strutturati. Per una sequenza di fotogrammi, ripeta l’operazione con frazioni temporali equidistanti mantenendo costanti estremi e controlli. La convalida rifiuta colori non validi, numeri non finiti, frazioni fuori dalla sequenza, controlli x non monotoni e controlli y eccessivi, impedendo a una configurazione errata di generare silenziosamente un campione ingannevole.