Làm mờ một màu trắng (tăng độ sáng)

Question

Tôi muốn tạo một hộp văn bản trong .NET "glow" màu vàng, và sau đó "phai" thành màu trắng (về cơ bản, bằng cách tăng dần độ sáng). Tôi nghĩ rằng Stackoverflow thực hiện điều này sau khi bạn đã đăng câu trả lời. Tôi biết rằng tăng độ sáng không phải là tất cả những gì đơn giản (nó không chỉ tăng/giảm RGB đồng đều), nhưng tôi không chắc chắn làm thế nào để làm điều này.

Độ chính xác màu hoàn hảo không quan trọng đối với điều này. Tôi đang sử dụng C#, mặc dù VB ví dụ sẽ là tốt, quá.

Chỉnh sửa: Điều này dành cho Winforms.

Answer 1

Đây có thể là nhiều hơn bạn cần, đây là mã cho lớp tôi sử dụng:

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; 
    } 
} 

này sử dụng DataEventArgs<T> (hình dưới đây)

/// <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; 
    } 
} 

sử dụng trong hình thức của bạn như thế này:

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

Ban đầu bạn không chỉ định công nghệ khi tôi gửi câu trả lời này, nhưng dưới đây là cách bạn làm điều đó bằng cách sử dụng jQuery.

UI/Effects/Highlight.

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

Answer 3

Chỉ nội suy giữa các màu dựa trên thời gian.

Nếu màu cam của bạn là (r1, g1, b1) và bạn muốn mờ sang màu khác (r2, g2, b2), công thức nội suy tuyến tính là (r1 + (r2-r1) * t, g1 + (g2-g1) * t, b1 + (b2-b1) * t), trong đó t nằm trong khoảng [0.0 1.0].

Trong ví dụ của bạn, màu đầu tiên của bạn có thể giống như (255,200,0) và màu thứ hai của bạn sẽ là (255,255,255).

Nếu bạn muốn chuyển tiếp mượt mà hơn, hãy tìm các cách nội suy khác nhau.

Answer 4

Nếu bạn muốn làm điều đó một cách thuận tiện và trơn tru, hãy xem lớp ColorMatrix.