按钮的动画发光效果 - C# Windows 窗体

Question

我想在按下按钮时将动画应用到我的按钮。在 WPF 中，我可以使用 Storyboard 和触发器来创建动画。这是一个例子：

<Storyboard x:Key="AniOpacityDelay">
  <DoubleAnimation
    Storyboard.TargetName="background"
    Storyboard.TargetProperty="Opacity"
    AutoReverse="True"
    To="0.65"
    Duration="0:0:0.2"/>
</Storyboard>

和：

<ColorAnimationUsingKeyFrames
  Storyboard.TargetName="Itemcont"
  Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">

  <EasingColorKeyFrame KeyTime="0" Value="#EEEEEE"/>
</ColorAnimationUsingKeyFrames>

Windows 窗体没有Storyboard 和触发器。如何在 Windows 窗体中制作流畅的动画？

这是我的 Windows 窗体代码：

void DelayTime()
{
  timer = new Timer();
  timer.Interval = (int)System.TimeSpan.FromSeconds(this.DelayTime).TotalMilliseconds;
  timer.Tick += (s, es) =>
  {
    this.mouseover = false; 
    this.Cursor = Cursors.Hand;
    this.Enabled = true;
  };
  timer.Start();
}

protected override void OnMouseDown(MouseEventArgs mevent)
{
  base.OnMouseDown(mevent);
  mouseover = true;
  this.Enabled = false;
  DelayTime();
}

protected override void OnPaint(PaintEventArgs e)
{
  Color bg = this._Background;
  bg = mouseover ? this._HoverColor : this._Background;
  e.Graphics.FillRectangle(new SolidBrush(bg), this.ClientRectangle);
}

Answer 1

基本思想是使用Timer 并将发光颜色与原始背景颜色混合。

例如，您可以将按钮的FlatStyle 设置为Flat 并覆盖OnMouseEnter 和OnMouseLeave。在OnMouseEnter 中启动计时器并在OnMouseLeave 中停止计时器。在计时器Tick 事件中，您可以将按钮的FlatAppearance 的MouseOverBackColor 设置为您在Tick 事件中增加其alpha 通道的颜色。

发光按钮代码

using System;
using System.Drawing;
using System.Windows.Forms;
public class GlowButton : Button
{
    Timer timer;
    int alpha = 0;
    public Color GlowColor { get; set; }
    public GlowButton()
    {
        this.DoubleBuffered = true;
        timer = new Timer() { Interval = 50 };
        timer.Tick += timer_Tick;
        this.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
        this.GlowColor = Color.Gold;
        this.FlatAppearance.MouseDownBackColor = Color.Gold;
    }
    protected override void OnMouseEnter(EventArgs e)
    {
        base.OnMouseEnter(e);
        this.FlatAppearance.MouseOverBackColor = CalculateColor();
        timer.Start();
    }
    protected override void OnMouseLeave(EventArgs e)
    {
        base.OnMouseLeave(e);
        timer.Stop();
        alpha = 0;
        this.FlatAppearance.MouseOverBackColor = CalculateColor();
    }
    void timer_Tick(object sender, EventArgs e)
    {
        int increament = 25;
        if (alpha + increament < 255) { alpha += increament; }
        else { timer.Stop(); alpha = 255; }
        this.FlatAppearance.MouseOverBackColor = CalculateColor();
    }
    protected override void Dispose(bool disposing)
    {
        if (disposing) timer.Dispose();
        base.Dispose(disposing);
    }
    private Color CalculateColor()
    {
        return AlphaBlend(Color.FromArgb(alpha, GlowColor), this.BackColor);
    }
    public Color AlphaBlend(Color A, Color B)
    {
        var r = (A.R * A.A / 255) + (B.R * B.A * (255 - A.A) / (255 * 255));
        var g = (A.G * A.A / 255) + (B.G * B.A * (255 - A.A) / (255 * 255));
        var b = (A.B * A.A / 255) + (B.B * B.A * (255 - A.A) / (255 * 255));
        var a = A.A + (B.A * (255 - A.A) / 255);
        return Color.FromArgb(a, r, g, b);
    }
}

Answer 2

您将使用 winforms 获得的最接近的可能是使其成为 DoubleBuffered。 WinForms 不太适合动画。

如果您使用的是自定义控件，请将其添加到 Initialize();

SetStyle(ControlStyles.OptimizedDoubleBuffer, true);

否则，请在属性中或通过代码使表单为 DoubleBuffered：

DoubleBuffered = true;

然后创建动画（如果你还没有弄清楚的话），循环检查动画是否完成（在计时器事件中）。