按钮的动画发光效果-C＃Windows窗体 [英] Animated Glow Effect for Button - C# Windows Forms

问题描述

我想在按下按钮时对按钮应用动画。在WPF中，我可以将 Storyboard 与触发器配合使用来创建动画。下面是一个示例：

I want to apply animation to my button when pressing button. In WPF I can use Storyboard with triggers to create animation. Here is an example:

<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 Forms doesn't have Storyboard and triggers. How to make smooth animation in Windows Forms?

这是Windows窗体的代码：

Here's my code for Windows Forms:

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

推荐答案

基本思想是使用 Timer ，然后将发光颜色与原始背景色进行Alpha混合。

The basic idea is using a Timer and alpha-blending the glow color with original background color.

示例，您可以设置按钮的 FlatStyle 到 Flat 并覆盖 OnMouseEnter 和 OnMouseLeave 。在 OnMouseEnter 中启动计时器，然后在 OnMouseLeave 中停止计时器。在计时器 Tick 事件中，可以设置 MouseOverBackColor of 将按钮的 FlatAppearance 设置为一种颜色，您可以在 Tick 事件。

For example you can set FlatStyle of the button to Flat and override OnMouseEnter and OnMouseLeave. In OnMouseEnter start the timer and in and OnMouseLeave stop the timer. In timer Tick event you can set the MouseOverBackColor of FlatAppearance of button to a color which you increase it's alpha channel in Tick event.

发光按钮代码

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

这篇关于按钮的动画发光效果-C＃Windows窗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！