c# - 色を白にフェードする (明るさを増す)

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.01.0]の範囲です。

あなたの例では、最初の色はおそらく（255,200,0）のようなもので、2番目の色は（255,255,255）になります。

よりスムーズな遷移が必要な場合は、さまざまな補間方法を調べてください。

Answer 3

迅速かつスムーズに実行したい場合は、ColorMatrixクラスをご覧ください。

Answer 4

私がこの回答を提出したとき、最初はテクノロジーを指定していませんでしたが、jQuery を使用してそれを行う方法を次に示します。

UI/エフェクト/ハイライト.

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