颜色上的css过渡背后的数学原理是什么？

Question

如果我有这样的代码:

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

如果我把鼠标悬停在元素上，它的颜色会在10秒内从蓝色变为红色。

如果有时间轴:

0秒- Blue

5秒- ?

10秒-红色

是否有一种方法可以计算5秒或任何秒的过渡颜色?

Answer 1

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

规范还定义了如何在过渡期间计算插值值。下面是关于颜色值的说明:

• color:通过红色，绿色，蓝色和alpha分量插值(将每个分量作为数字处理，见下文)。插值是在预相乘的颜色之间完成的(即，指定的红色，绿色和蓝色组件已乘以alpha的颜色)。

可以使用window.getComputedStyle()等方法获得正在进行的过渡过程中任意给定时间点的精确值。从引言部分:

属性的计算值随时间从旧值转换到新值。因此，如果脚本在转换时查询属性的计算值(或其他依赖于它的数据)，它将看到一个中间值，该值表示该属性的当前动画值。