计算颜色渐变答案

【问题标题】：Calculate a color fade计算颜色渐变
【发布时间】：2010-09-24 02:12:17
【问题描述】：

给定两种颜色和 n 个步骤，如何计算 n 种颜色，包括产生淡入淡出效果的两种给定颜色？

如果可能的话，最好使用伪代码，但这可能会在 Java 中实现。

谢谢！

【问题讨论】：

【解决方案1】：

将每种颜色划分为其 RGB 分量，然后计算所需的各个步骤。

oldRed = 120;
newRed = 200;
steps = 10;
redStepAmount = (newRed - oldRed) / steps;

currentRed = oldRed;
for (i = 0; i < steps; i++) {
   currentRed += redStepAmount;
}

显然将其扩展到绿色和蓝色。

【讨论】：

所示代码永远不会到达 newRed，因为整数截断和非一错误。最好重组为 currentRed = oldRed + ((i * (newRed - oldRed)) / (steps - 1)。
是的，我在写它的时候就想到了这一点——但是有几种方法可以解决这个问题，我想我应该为实施者留下一个练习:-)

【解决方案2】：

您还应该查看两个很好的相关问题：

请注意，您通常最好在 HSV 颜色空间而不是 RGB 中执行此操作 - 它会生成人眼更悦目的颜色（冲突或负面光学特性的可能性更低）。

祝你好运！

-亚当

【讨论】：

【解决方案3】：

如果你想要一个看起来像大多数颜色选择器 GUI 小部件的混合，你真的想翻译成 HSL 或 HSV。从那里开始，您可能对每个维度的线性插值都很好。

尝试直接在 RGB 颜色空间中进行任何插值是个坏主意。这太非线性了（不，伽马校正在这种情况下无济于事）。

【讨论】：

我不同意。有很多操作在其他颜色空间中效果更好，但两个已知端点之间的插值不是其中之一。
我认为在许多情况下，基本的线性 RGB 变换是令人满意的，例如：我的文本框是红色的，我希望它在正确填充后很好地淡化为绿色。这一切都在不到一秒钟的时间内发生，就足够了。
@nickf - 没错，如果它是一种时间效应，那么你有比空间效应更多的余地。 @mark - 在 HSV 中插值有什么问题？我已经取得了相当大的成功。

【解决方案4】：

对于那些寻找可以复制和粘贴的东西的人。为RGB颜色做了一个快速功能。返回一个单一的颜色，它是接近rgbColor2 的ratio 的数量。

function fadeToColor(rgbColor1, rgbColor2, ratio) {
    var color1 = rgbColor1.substring(4, rgbColor1.length - 1).split(','),
        color2 = rgbColor2.substring(4, rgbColor2.length - 1).split(','),
        difference,
        newColor = [];

    for (var i = 0; i < color1.length; i++) {
        difference = color2[i] - color1[i];
        newColor.push(Math.floor(parseInt(color1[i], 10) + difference * ratio));
    }

    return 'rgb(' + newColor + ')';
}

【讨论】：

【解决方案5】：

问题是你想要发生什么样的转变？如果您转置到 HSV 颜色空间并给出

FF0000 和 00FF00

它将从红色过渡到黄色到绿色。

但是，如果您将“黑色”或其他阴影定义为混合的中点，则必须先将颜色着色为该颜色 ff0000->000000->00ff00 或通过白色：ff0000 -> ffffff -> 00ff00。

然而，通过 HSV 进行转换可能会很有趣，因为您必须使用一些三角函数将圆形映射映射到矢量分量。

【讨论】：

【解决方案6】：

最简单的做法是在颜色分量之间进行线性插值（参见 nickf 的回复）。请注意，眼睛是高度非线性的，所以它不一定看起来你正在均匀地走。一些色彩空间试图解决这个问题（也许是 CIE？），因此您可能希望先转换为另一个颜色空间，进行插值，然后再转换回 RGB 或您正在使用的任何颜色空间。

【讨论】：

应用于颜色值的伽玛将有助于抵消非线性，因此转换到另一个颜色空间可能是多余的。

【解决方案7】：

this answer怎么样

- (UIColor *)colorFromColor:(UIColor *)fromColor toColor:(UIColor *)toColor percent:(float)percent
{
    float dec = percent / 100.f;
    CGFloat fRed, fBlue, fGreen, fAlpha;
    CGFloat tRed, tBlue, tGreen, tAlpha;
    CGFloat red, green, blue, alpha;

    if(CGColorGetNumberOfComponents(fromColor.CGColor) == 2) {
        [fromColor getWhite:&fRed alpha:&fAlpha];
        fGreen = fRed;
        fBlue = fRed;
    }
    else {
        [fromColor getRed:&fRed green:&fGreen blue:&fBlue alpha:&fAlpha];
    }
    if(CGColorGetNumberOfComponents(toColor.CGColor) == 2) {
        [toColor getWhite:&tRed alpha:&tAlpha];
        tGreen = tRed;
        tBlue = tRed;
    }
    else {
        [toColor getRed:&tRed green:&tGreen blue:&tBlue alpha:&tAlpha];
    }

    red = (dec * (tRed - fRed)) + fRed;
    green = (dec * (tGreen - fGreen)) + fGreen;
    blue = (dec * (tBlue - fBlue)) + fBlue;
    alpha = (dec * (tAlpha - fAlpha)) + fAlpha;

    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}

【讨论】：