3

我目前正在尝试将 div 的背景直接从红色淡化为绿色。但是我找不到一个很好的过渡，它不会在途中遇到任何不匹配的颜色。我发现的两种方法都使用了 jQuery.Color-plugin，你也可以在JsFiddle上找到它们：

 $("#rgb")
    .css("background-color", "#ff0000")
    .animate({backgroundColor: "#00ff00"});
$("#hsl")
    .css("background-color", $.Color({ hue: 0, saturation: 1, lightness: 0.5 }))
    .animate({backgroundColor: $.Color({ hue: 120, saturation: 1, lightness: 0.5 })});

  1. 第一个使用RGB。jQuery 只是在#ff0000（红色）和#00ff00（绿色）之间进行插值。但是在动画中间的某个地方，颜色变成了相当深的黄色或棕色，这扰乱了整个动画的印象（可能是#888800）。

  2. 第二个使用HSL 但在这里，动画通过亮黄色传递，因为色调值是从 0 到 120 的动画，在 60 处传递黄色：

正如你在这张图片中看到的

有没有其他方法可以通过漂亮的过渡从红色变为绿色？也许在理论上？

4

3 回答 3

2

我进一步接受了我在评论中提出的建议...... http://jsfiddle.net/9RUBR/3/所以我们过渡到b0b080这看起来还不错。甚至更进一步，它几乎通过白色... http://jsfiddle.net/9RUBR/4/ -ffffc0

通过添加稍微多一点的蓝色，过渡色比浑黄更接近灰色。它仍然不完美，但...

顺便说一句，这可能是一个比您最初想象的更复杂的问题。人类对颜色的感知是非常非线性的。我曾经不得不编写一个算法来确定两种任意颜色与人类的相似程度（带有漂亮颜色图的问题）。我能找到的最佳解决方案涉及DeltaE 2000（链接问题中的第 4 个情节）

如您所见，实际颜色和感知颜色之间存在相当复杂的关系。理论上，您需要找到灰度变化最小的 2 种颜色（在其中一个方格上）之间的路径。

于 2013-09-22T10:55:44.817 回答
2

在 youtube 上偶然发现答案只花了四年时间：https ://www.youtube.com/watch?v=LKnqECcg6Gw

它与存储颜色的方式有关。众所周知，(0,0,0) 的 rgb 值是黑色（0% 光子），而 (255, 255, 255) 是白色（100% 光子）。但是（127、127、127）有多少光子？

这不是 50%，而是大约 25%。这就是将 rgb 值转换为光时显示器的作用。

因此，当以线性方式将 (255, 0, 0) 动画到 (0, 255, 0)（每个 33% 光子）时，它通过 (127, 127, 0) 只有 25% * 1/3 + 25 % * 1/3 = 16% 光子，这要暗得多。那是介于两者之间的褐色。

相反，您应该做的是在取平均值之前对值进行平方，然后再取结果的平方根。

结果要好得多，因为中间值现在是 (180, 180, 0)，因此要亮得多。

您可以在 jsfiddle 上使用 gamma 的值： https ://jsfiddle.net/fxftm4ub/1/

PS: I don't know, why I got the error-message that I need to indent some code. But adding this line helped.
于 2017-07-03T19:31:46.010 回答
1

您是否尝试将红色 div 放在绿色 div 上并将红色 div 淡出？也许不是最优雅的方式，但它应该工作。

于 2013-09-21T23:53:46.653 回答