CSS颜色过渡的数学原理是什么？

Question

6

如果我有这段代码：

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

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

如果我将鼠标悬停在元素上，颜色将在10秒钟内平稳过渡从蓝色变为红色。

如果有一个时间轴：

0秒 - 蓝色

5秒 - ?

10秒 - 红色

有没有一种方法可以计算出在过渡的5秒或任何秒数时的颜色？

- Tarang

@user2864740，我正在尝试获取特定的颜色。有没有一种关于时间的RGB或十六进制哈希公式可以使用？ - Tarang

请参考BoltClock的答案以了解如何通过编程获取它。否则，手动将颜色分解为各个组件值，按时间应用变换函数（对于线性变换，它是f(t) = a + (b - a) * t，在这种情况下t = 0.5），并从组件构建颜色十六进制值。 - user2864740

@user2864740 a和b是RGB组件、色调或其他类型的颜色描述符？ - Tarang

a 是起始值，b 是结束值 - 分别针对每个 R/G/B 组件。例如，R 通道从 x33 (51) 到 xFF (255)。在此过程中的一半是 f(0.5) = 51 + (255 - 51) * 0.5 = 153 或 x99 -> "#99????". - user2864740

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

这由transition-timing-function属性决定，它可以表示为一个三次贝塞尔曲线或对应预定义曲线的预定义关键字。在你的例子中，该属性的值为linear，所以在5秒的间隔内，该值将正好是起始值和结束值的平均值。

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

颜色:通过红、绿、蓝和透明度组件进行插值(将每个组件视为数字，见下文)。插值是在预乘颜色之间完成的(即已将指定的红、绿和蓝分量乘以 alpha)。

您可以使用 window.getComputedStyle() 等方法，在进行过渡的任何时刻获得精确值。如 introductory section 所示：

属性的计算值会随着时间从旧值转换为新值。因此，如果脚本在属性（或其他依赖它的数据）正在进行转换时查询属性的计算值，则会看到代表属性当前动画值的中间值。