ボタン - 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

主な考え方は、タイマーを使用し、グローの色を元の背景色でアルファベットにすることです。

たとえば、ボタンのFlatStyleをFlatに設定し、OnMouseEnterとOnMouseLeaveを上書きすることができます。 OnMouseEnterでタイマーを開始し、OnMouseLeaveタイマーを停止します。タイマーTickイベントでボタンのFlatAppearanceのMouseOverBackColorを、Tickイベントのアルファチャンネルを増やす色に設定することができます。

グローボタンのコード

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

あなたはリサイズとなります最寄りのは、おそらくそれはDoubleBufferedなっています。 WinFormsはアニメーションにはあまり適していません。

カスタムコントロールを使用している場合は、これをInitialize（）に追加します。

SetStyle(ControlStyles.OptimizedDoubleBuffer, true); 

そうでない場合は、プロパティでDoubleBufferedフォームを作る、またはコードによって：

その後

DoubleBuffered = true; 

（あなたはすでにそれを考え出したていない場合）アニメーションを作成するには、かどうかをチェックするループを行います（タイマーイベントで）アニメーションが完了します。