简单的按钮动画

本文关键字：动画 按钮 简单 | 更新日期: 2023-09-27 17:53:36

我正在努力学习.NET编程。作为我学习的一部分，我尝试在按钮上做一些效果。它正在起作用……但不像我想象的那么顺利!有更好的方法吗?提前感谢!

我的需要:

有3个按钮。当您将鼠标悬停在其中一个按钮上时，它会展开，当您将鼠标从该按钮移开时，它会恢复到初始大小。

private void button1_MouseHover(object sender, EventArgs e)
    {
        button1.BackColor = Color.White;
        button1.Width = 130;
        button1.BringToFront();            
    }
    private void button1_MouseLeave(object sender, EventArgs e)
    {
        button1.BackColor = Color.Red;
        button1.Width = 75;         
    }
    private void button2_MouseHover(object sender, EventArgs e)
    {
        button2.BackColor = Color.Gray;
        button2.Width = 130;
        button2.BringToFront();            
    }
    private void Form1_MouseLeave(object sender, EventArgs e)
    {
        button2.BackColor = Color.Red;
        button2.Width = 75;
    }
    private void button3_MouseHover(object sender, EventArgs e)
    {
        button3.BackColor = Color.DimGray;
        button3.Width = 130;
        button3.BringToFront();
    }
    private void button3_MouseLeave(object sender, EventArgs e)
    {
        button3.BackColor = Color.Red;
        button3.Width = 75;
    }

简单的按钮动画

首先，你不会想要重复3次相同的操作。创建一个方法来为按钮添加适当的处理程序，然后只编写一次代码来处理任何给定的按钮。

请注意，您可以进入扩展/收缩刻度处理程序并使用percentComplete值来设置高度，沿着光谱移动颜色(这将涉及到一些颜色的数学计算)或更改按钮的任何其他方面。如果你真的有动机去推广它，你可以给Action<double>的方法添加一个参数，根据给定的进度百分比对对象做一些事情。

public void AddAnimation(Button button)
{
    var expandTimer = new System.Windows.Forms.Timer();
    var contractTimer = new System.Windows.Forms.Timer();
    expandTimer.Interval = 10;//can adjust to determine the refresh rate
    contractTimer.Interval = 10;
    DateTime animationStarted = DateTime.Now;
    //TODO update as appropriate or make it a parameter
    TimeSpan animationDuration = TimeSpan.FromMilliseconds(250);
    int initialWidth = 75;
    int endWidth = 130;
    button.MouseHover += (_, args) =>
    {
        contractTimer.Stop();
        expandTimer.Start();
        animationStarted = DateTime.Now;
        button.BackColor = Color.DimGray;
    };
    button.MouseLeave += (_, args) =>
    {
        expandTimer.Stop();
        contractTimer.Start();
        animationStarted = DateTime.Now;
        button.BackColor = Color.Red;
    };
    expandTimer.Tick += (_, args) =>
    {
        double percentComplete = (DateTime.Now - animationStarted).Ticks
            / (double)animationDuration.Ticks;
        if (percentComplete >= 1)
        {
            expandTimer.Stop();
        }
        else
        {
            button.Width = (int)(initialWidth +
                (endWidth - initialWidth) * percentComplete);
        }
    };
    contractTimer.Tick += (_, args) =>
    {
        double percentComplete = (DateTime.Now - animationStarted).Ticks
            / (double)animationDuration.Ticks;
        if (percentComplete >= 1)
        {
            contractTimer.Stop();
        }
        else
        {
            button.Width = (int)(endWidth -
                (endWidth - initialWidth) * percentComplete);
        }
    };
}

如果你正在使用WinForms，动画将是相当痛苦的，你将不得不通过Timer对象自己处理它们。

如果你正在学习。net，并且想用动画和样式制作看起来很酷的应用程序，我强烈建议你看看WPF。通过 c# 或XAML可以很容易地制作动画。

虽然在WinForms中仍有可能实现，但由于这些功能已经内置在WPF中(并进行了优化)，因此将花费更多的开发时间。

当您修改控件属性时，它会立即生效。你想要的东西通常被称为某种类型的渐变或渐变。可能有一些库可以做到这一点，但如果你想自己写这个，你可以使用Timer对象，并在每个tick上更新颜色。

你要做的是将颜色设置为TargetColor(这是你创建的一个变量或属性)，然后启动一个计时器，可能每10毫秒滴答。在每一秒中，你会看到开始时间，以及从那以后过了多长时间。如果你想用一秒的时间来播放动画，那就是1000毫秒。所以在每一次滴答的过程中，你看一下经过的时间，也许是200毫秒，然后除以200/1000得到你进入动画的时间。然后查看起始颜色和目标颜色之间的差异，将差异乘以分数，并将结果添加到起始颜色中。换句话说，在一个持续1000毫秒的动画中投入200毫秒意味着你投入了20%的时间。因此，你想要将颜色设置为从开始颜色到结束颜色的20%的颜色。

你可以做很多事情来完善它。也许有一个子类Button控件封装定时器，并公开函数/属性来跟踪开始/结束颜色，动画过渡时间等。大多数像这样的动画UI功能都允许您指定动画应该持续多长时间，然后它在转换时在状态之间插入。这就是tweening这个术语的起源，因为它来自于通过

从一个状态转换到另一个状态。
相关文章：