Kubische Bézier-Farbinterpolation

Geben Sie Start- und Endfarbe, einen Anteil von null bis eins sowie die vier von CSS cubic-bezier verwendeten Kontrollkoordinaten an. Das Ergebnis enthält den geglätteten Anteil, normalisierte Farben, den Hexadezimalwert und die RGB-Kanäle. So lassen sich Übergänge in Designwerkzeugen, Animationspipelines, Tests und generierten Assets reproduzieren, ohne von der Animationsuhr eines Browsers abhängig zu sein.

Trennen Sie Zeitfortschritt und sichtbaren Farbfortschritt

Eine lineare Mischung setzt fünfzig Prozent der verstrichenen Zeit mit fünfzig Prozent des Abstands zwischen zwei Farben gleich. Reale Oberflächen benötigen häufig einen anderen Rhythmus: Ein Übergang kann sanft beginnen, in der Mitte beschleunigen und sich dem Ziel langsam annähern. Diese Fähigkeit wendet vor dem Mischen der RGB-Kanäle eine kubische Bézier-Zeitkurve an. Die Eingabe t bleibt der Anteil auf der Zeitachse, während eased_t den von der Kurve erzeugten Farbanteil angibt. Diese Trennung macht das Ergebnis leicht prüfbar und wiederverwendbar. Zum Zeitpunkt null wird die Startfarbe und zum Zeitpunkt eins die Endfarbe ausgegeben. Dazwischen bestimmt die Kurve, wie schnell sich die Kanäle verändern. Da die Operation ausschließlich konkrete Zahlen erhält und keine Uhr abfragt, liefern wiederholte Anfragen mit identischen Eingaben dasselbe Ergebnis. Das hilft, wenn Renderer, Designexport, Testsuite oder Buildprozess bei einem Übergangsbild übereinstimmen müssen, ohne eine Animation auszuführen oder die Browseranzeige zu einem bestimmten Zeitpunkt zu schätzen.

So wird der kubische Bézier-Anteil gelöst

Eine CSS-ähnliche kubische Bézierkurve beginnt bei null, endet bei eins und besitzt zwei vom Aufrufer festgelegte Kontrollpunkte. Der angeforderte Zeitanteil liegt auf der x-Achse der Kurve. Das y-Polynom einfach mit derselben Zahl auszuwerten, wäre daher bei den meisten Kurven falsch. Der Rechner sucht zunächst den internen Kurvenparameter, dessen x-Koordinate dem gewünschten Anteil entspricht. Er verwendet bei geeigneter Steigung eine begrenzte Newton-Suche und andernfalls eine Bisektionssuche mit fester Schrittzahl als stabile Rückfallebene. Danach wertet er die y-Koordinate am gefundenen Parameter aus. Die x-Kontrollwerte müssen zwischen null und eins liegen; dadurch bleibt die Zeit monoton und die Antwort eindeutig. Die y-Werte dürfen von minus zehn bis zehn reichen und ermöglichen Vorwegnahme sowie Überschwingen. Verlässt das Easing den normalen Bereich, werden die interpolierten RGB-Kanäle auf gültige Bytewerte begrenzt. Dezimalwerte werden einheitlich und Kanäle auf die nächste Ganzzahl gerundet. Diese Regeln vermeiden Abhängigkeiten von Browser-Engine, Bildrate und plattformspezifischer Animationsabtastung.

Wählen Sie Eingaben und verwenden Sie die Ergebnisfarbe

Geben Sie jede Farbe mit drei oder sechs Hexadezimalstellen ein, wahlweise mit vorangestelltem Doppelkreuz. Kurzformen werden erweitert; jede akzeptierte Farbe erscheint normalisiert mit sechs Kleinbuchstaben beziehungsweise Ziffern. Legen Sie t zwischen null und eins fest und danach x1, y1, x2 und y2 in der üblichen cubic-bezier-Reihenfolge. Die verbreitete ease-in-out-Form nutzt beispielsweise 0.42, 0, 0.58 und 1. Die Antwort bewahrt die normalisierten Endpunkte und die Kurve, zeigt den berechneten geglätteten Anteil und liefert sowohl eine Hexfarbe als auch getrennte Rot-, Grün- und Blaukanäle. Nutzen Sie den Hexwert in CSS, SVG, Designtokens oder Bildanweisungen und das Kanalobjekt für strukturierte numerische Daten. Für eine Bildfolge rufen Sie die Operation mit gleichmäßig verteilten Zeitanteilen auf und lassen Endpunkte sowie Kontrollwerte unverändert. Die Validierung weist fehlerhafte Farben, nicht endliche Zahlen, Zeitanteile außerhalb des Bereichs, nicht monotone x-Kontrollen und übermäßige y-Kontrollen zurück. Eine ungültige Konfiguration kann somit nicht unbemerkt ein irreführendes Übergangsmuster erzeugen.