插值 RGB 颜色答案

【问题标题】：Interpolating RGB color插值 RGB 颜色
【发布时间】：2010-10-08 06:23:37
【问题描述】：

在给定 start_time 和 end_time、start_color 和 end_color 的情况下，我正在纠结如何插入颜色。为简单起见，以下是我打算如何仅使用红色组件的示例：

start_time = 0
end_time = 1
start_color = F //base 16 ftw
end_color = 0

我可以看到在 0.5 时，red_out 应该是 8。这将是从鲜红色变为黑色的中途。

所以是time_elapsed * start_color？但是，如果它以另一种方式褪色，从黑色变为鲜红色怎么办？这就是我感到困惑的地方。

【问题讨论】：

好东西，大家好。 var red_out = time_alive * ( pArray[i].pEndColorRed - pArray[i].pStartColorRed ) / ( now - pArray[i].pStarttime ).toString(16);
呃，这是我写过的最丑的代码行，哈哈

var red_out = (Math.abs(parseInt((time_alive * (pArray[i].pEndColorRed - pArray[ i].pStartColorRed) / ( pArray[i].pLifespan ))))).toString(16);

标签： javascript html canvas

【解决方案1】：

对于每个颜色成分，您必须使用以下公式（没什么神奇的）：

color = time_elapsed * (end_color - start_color) / (end_time - star_time)

【讨论】：

【解决方案2】：

另一种方式似乎很简单，如果你认为在时间t（其中t的范围从0到1），通道的值是：

start + t * (end - start)

这样，如果结束值小于起始值（如红色 -> 黑色的情况），end - start 子句为负数，因此随着时间的增加值 根据需要减少。

在边缘情况下也可以看到，

t = 0   =>   start + 0 = start
t = 1   =>   start + (end - start) = end

根据需要。

编辑：这种表示的好处是它清楚地说明了如何修改衰减率。只要t 的值从 0 开始并最终达到 1，它就不必进行线性修改。例如，如果您希望插值开始缓慢并最终加速，您可以改用 t²。

【讨论】：

【解决方案3】：

interpolated_color_component = (current_time - start_time) / (end_time - start_time) * (end_color_component - start_color_component) + start_color_component

【讨论】：