html - css 颜色转换背后的数学原理是什么？

Question

如果我有这段代码:

.box {
    color: #3399FF /* Blue */
    transition: 10s all linear;
}

.box:hover {
    color: #FF3300 /* Red */
}

如果我将鼠标悬停在元素上，颜色会在 10 秒内从蓝色平滑过渡到红色。

如果有时间线:

0 seconds - Blue

5 seconds - ?

10 seconds - Red

有没有一种方法可以计算过渡中 5 秒或任意秒数的颜色？

Answer 1

这由 transition-timing-function property 决定，它由三次贝塞尔曲线或与预定义曲线对应的预定义关键字表示。在您的示例中，此属性的值为 linear，因此在 5 秒间隔内，该值将恰好是开始值和结束值的平均值。

该规范还定义了如何 interpolated values在转换期间计算。这就是它所说的颜色值:

• color: interpolated via red, green, blue and alpha components (treating each as a number, see below). The interpolation is done between premultiplied colors (that is, colors for which the red, green, and blue components specified have been multiplied by the alpha).

您可以使用 window.getComputedStyle() 等在正在进行的转换期间的任何给定时间点获取精确值。来自introductory section :

The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed value of a property (or other data depending on it) as it is transitioning, it will see an intermediate value that represents the current animated value of the property.