将颜色淡化为白色（增加亮度）

Question

我想在 .NET 中制作一个文本框“发光”黄色，然后“淡化”为白色（基本上，通过逐渐增加亮度）。我认为 Stackoverflow 在您发布答案后会这样做。我知道增加亮度并不是那么简单（它不仅仅是均匀地增加/减少 RGB），但我不知道该怎么做。

完美的色彩准确度对此并不重要。我正在使用 C#，虽然 VB 示例也可以。

编辑：这是为 Winforms 准备的。

Answer 1

这可能比你需要的多，这是我使用的类的代码：

public class ControlColorAnimator
{
    private const int INTERVAL = 100;

    private readonly decimal _alphaIncrement;
    private readonly decimal _blueIncrement;
    private readonly Color _endColor;
    private readonly decimal _greenIncrement;
    private readonly int _iterations;
    private readonly decimal _redIncrement;
    private readonly Color _startColor;

    private decimal _currentAlpha;
    private decimal _currentBlueValue;
    private decimal _currentGreenValue;
    private decimal _currentRedValue;

    private Timer _timer;

    public ControlColorAnimator(TimeSpan duration, Color startColor, Color endColor)
    {
        _startColor = startColor;
        _endColor = endColor;
        resetColor();

        _iterations = duration.Milliseconds / INTERVAL;
        _alphaIncrement = ((decimal) startColor.A - endColor.A) / _iterations;
        _redIncrement = ((decimal) startColor.R - endColor.R) / _iterations;
        _greenIncrement = ((decimal) startColor.G - endColor.G) / _iterations;
        _blueIncrement = ((decimal) startColor.B - endColor.B) / _iterations;
    }

    public Color CurrentColor
    {
        get
        {
            int alpha = Convert.ToInt32(_currentAlpha);
            int red = Convert.ToInt32(_currentRedValue);
            int green = Convert.ToInt32(_currentGreenValue);
            int blue = Convert.ToInt32(_currentBlueValue);

            return Color.FromArgb(alpha, red, green, blue);
        }
    }

    public event EventHandler<DataEventArgs<Color>> ColorChanged;

    public void Go()
    {
        disposeOfTheTimer();
        OnColorChanged(_startColor);

        resetColor();

        int currentIteration = 0;
        _timer = new Timer(delegate
            {
                if (currentIteration++ >= _iterations)
                {
                    Stop();
                    return;
                }
                _currentAlpha -= _alphaIncrement;
                _currentRedValue -= _redIncrement;
                _currentGreenValue -= _greenIncrement;
                _currentBlueValue -= _blueIncrement;
                OnColorChanged(CurrentColor);
            }, null, TimeSpan.FromMilliseconds(INTERVAL), TimeSpan.FromMilliseconds(INTERVAL));
    }

    public void Stop()
    {
        disposeOfTheTimer();
        OnColorChanged(_endColor);
    }

    protected virtual void OnColorChanged(Color color)
    {
        if (ColorChanged == null) return;
        ColorChanged(this, color);
    }

    private void disposeOfTheTimer()
    {
        Timer timer = _timer;
        _timer = null;

        if (timer != null) timer.Dispose();
    }

    private void resetColor()
    {
        _currentAlpha = _startColor.A;
        _currentRedValue = _startColor.R;
        _currentGreenValue = _startColor.G;
        _currentBlueValue = _startColor.B;
    }
}

这使用DataEventArgs<T>（如下所示）

/// <summary>
/// Generic implementation of <see cref="EventArgs"/> that allows for a data element to be passed.
/// </summary>
/// <typeparam name="T">The type of data to contain.</typeparam>
[DebuggerDisplay("{Data}")]
public class DataEventArgs<T> : EventArgs
{
    private T _data;

    /// <summary>
    /// Constructs a <see cref="DataEventArgs{T}"/>.
    /// </summary>
    /// <param name="data">The data to contain in the <see cref="DataEventArgs{T}"/></param>
    [DebuggerHidden]
    public DataEventArgs(T data)
    {
        _data = data;
    }

    /// <summary>
    /// Gets the data for this <see cref="DataEventArgs{T}"/>.
    /// </summary>
    public virtual T Data
    {
        [DebuggerHidden]
        get { return _data; }
        [DebuggerHidden]
        protected set { _data = value; }
    }

    [DebuggerHidden]
    public static implicit operator DataEventArgs<T>(T data)
    {
        return new DataEventArgs<T>(data);
    }

    [DebuggerHidden]
    public static implicit operator T(DataEventArgs<T> e)
    {
        return e.Data;
    }
}

像这样在你的表单中使用：

private ControlColorAnimator _animator;

private void runColorLoop()
{
    endCurrentAnimation();
    startNewAnimation();
}

private void endCurrentAnimation()
{
    ControlColorAnimator animator = _animator;
    _animator = null;
    if (animator != null)
    {
        animator.ColorChanged -= _animator_ColorChanged;
        animator.Stop();
    }
}

private void startNewAnimation()
{
    _animator = new ControlColorAnimator(TimeSpan.FromSeconds(.6), Color.Yellow, BackColor);
    _animator.ColorChanged += _animator_ColorChanged;
    _animator.Go();
}

private void _animator_ColorChanged(object sender, DataEventArgs<Color> e)
{
    invokeOnFormThread(delegate { setColor(e); });
}

private void setColor(Color color)
{
    // code to set color of the controls goes here
}

private void invokeOnFormThread(MethodInvoker method)
{
    if (IsHandleCreated)
        Invoke(method);
    else
        method();
}

Answer 2

只需根据时间在颜色之间进行插值。

如果你的橙色是 (r1,g1,b1) 并且你希望淡化成不同的颜色 (r2,g2,b2)，线性插值的公式是 (r1 + (r2-r1) * t, g1 + (g2-g1) * t, b1 + (b2-b1) * t)，其中 t 在 [0.0 1.0] 范围内。

在您的示例中，您的第一种颜色可能类似于 (255,200,0)，而您的第二种颜色可能是 (255,255,255)。

如果您希望过渡更平滑，请查找不同的插值方式。

Answer 3

如果您想快速顺利地完成，请查看 ColorMatrix 类。

Answer 4

当我提交此答案时，您最初并没有指定技术，但这里是您使用 jQuery 的方法。

UI/Effects/Highlight.

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});