Interpolation de couleur Bézier cubique

Indiquez les couleurs de départ et d’arrivée, une fraction comprise entre zéro et un, ainsi que les quatre coordonnées de contrôle utilisées par l’easing cubic-bezier de CSS. Le résultat fournit la fraction lissée, les couleurs normalisées, la valeur hexadécimale et les canaux RGB, afin de reproduire les transitions dans les outils de conception, pipelines d’animation, tests et ressources générées sans dépendre de l’horloge d’animation d’un navigateur.

Distinguez la progression temporelle de celle de la couleur

Un mélange linéaire assimile cinquante pour cent du temps écoulé à cinquante pour cent de la distance entre deux couleurs. Les interfaces réelles exigent souvent un autre rythme : une transition peut démarrer doucement, accélérer en son milieu, puis ralentir près de sa destination. Cette capacité applique une courbe temporelle de Bézier cubique avant de mélanger les canaux RGB. L’entrée t reste la fraction de la chronologie, tandis que eased_t indique la fraction de couleur produite par la courbe. Cette distinction facilite l’examen et la réutilisation du résultat. À l’instant zéro, la couleur initiale est renvoyée ; à l’instant un, c’est la couleur finale. Entre ces extrémités, la courbe détermine la vitesse d’évolution des canaux. Comme l’opération reçoit des nombres explicites et ne consulte aucune horloge, des requêtes identiques produisent une sortie identique. Un moteur de rendu, un exporteur de conception, une suite de tests ou un processus de build peut ainsi cibler la même image de transition sans exécuter d’animation ni estimer l’affichage du navigateur à un instant donné.

Méthode de résolution de la fraction de Bézier cubique

Une courbe de Bézier cubique de type CSS part de zéro, arrive à un et possède deux points de contrôle fournis lors de l’appel. La fraction temporelle demandée appartient à l’axe x de la courbe : évaluer directement le polynôme y avec ce même nombre serait donc incorrect pour la plupart des courbes. Le calculateur recherche d’abord le paramètre interne dont la coordonnée x correspond à la fraction demandée. Il emploie une recherche de Newton bornée lorsque la pente convient, puis une recherche par bissection à nombre d’étapes fixe comme solution de repli stable. Il évalue ensuite la coordonnée y au paramètre obtenu. Les coordonnées x de contrôle doivent rester entre zéro et un afin de préserver la monotonie du temps et l’unicité de la réponse. Les contrôles y peuvent aller de moins dix à dix pour autoriser anticipation et dépassement. Si l’easing sort de l’intervalle normal, les canaux RGB interpolés sont limités à des octets valides. Les décimales affichées sont arrondies uniformément et les canaux à l’entier le plus proche. Ces règles éliminent toute dépendance envers le moteur du navigateur, la cadence d’images ou l’échantillonnage propre à une plateforme.

Choisissez les entrées et exploitez la couleur renvoyée

Saisissez chaque couleur sous la forme de trois ou six chiffres hexadécimaux, éventuellement précédés d’un dièse. Les formes courtes sont développées et toutes les couleurs acceptées reviennent normalisées sur six chiffres minuscules. Fournissez t entre zéro et un, puis x1, y1, x2 et y2 dans l’ordre habituel de cubic-bezier. Par exemple, la forme ease-in-out courante utilise 0.42, 0, 0.58 et 1. La réponse conserve les extrémités normalisées et la courbe, expose la fraction lissée calculée et fournit à la fois une couleur hexadécimale et les canaux rouge, vert et bleu séparés. Utilisez la valeur hexadécimale dans CSS, SVG, des jetons de conception ou des instructions d’image ; préférez l’objet de canaux pour des données numériques structurées. Pour créer une série d’images, répétez l’opération avec des fractions temporelles régulièrement espacées sans modifier les extrémités ni les contrôles. La validation refuse les couleurs mal formées, nombres non finis, fractions hors chronologie, contrôles x non monotones et contrôles y excessifs, empêchant ainsi toute configuration invalide de produire silencieusement un échantillon trompeur.