[转]个人代码库の迅雷7动态图标按钮模拟

最新推荐文章于 2021-06-06 15:12:30 发布

aptl84294

最新推荐文章于 2021-06-06 15:12:30 发布

阅读量144

点赞数

原文链接：http://www.cnblogs.com/hxworm/articles/1984433.html

版权

转自:http://www.cnblogs.com/asion/archive/2011/03/12/1982212.html

引言：

迅雷7 发布以来，就对它的“动态图标按钮”特效垂涎很久了，现在终于有机会和心情来模拟这个效果。

我坚信在编程的世界，没有做不到，只有想不到！

特效一览：

鼠标只要移动到上面任意图标上,就会有一个动态的转换图标效果。鼠标离开的时候，也有一个动态的恢复初始图标的动态转换图标的过程。

这样的一个效果，使得整个操作过程中的动作反馈非常的明显，并且显得整个程序生动得多。

原理思考：

首先，从操作上可以将这个效果分为两个阶段：

阶段1，对应鼠标的接触事件（MouseEnter）；

阶段2，对应鼠标的离开事件（MouseLeave）。

然后，从图标显示看，初步可以分为四个状态：

状态1，静态图标A；

状态2，动态图标B；

状态3，动态图标C；

状态4，静态图标D。

最后，就是将事件和图标状态联系起来，就可以实现动态的转换效果了。

结果，在实际代码的实现中，还增加了一个计时器，才得以实现。

控件选择：

既然显示的是动态图标，第一想法就是选用 PictureBox控件。

当然，还有上面的说的“计时器”控件，目的是为了控制图标的转换。

在这里留个思考：

假如不用计时器，是否也能实现同样效果。

突破点：在使用EASY GIF Animator制作GIF图片的时候，发现有一个“动画属性”，可以设置动画的循环次数。当我选择只循环一次的时候，唯有选择用IE浏览器显示图片，才有效果。而假如使用软件浏览图片的话，就会“一直无限循环”！

图标制作：

原理分析显示，此效果需要用到两张动态图标，因此必须制作四张合格的图标素材。

制作要点：动态图标的效果最好是两张静态图标的动态转换的效果，即给人一种慢慢过渡的感觉。

在这里再次引发一个思考：

可否将两张动态图标合并为一张。

出发点：在观察迅雷7的效果转换的时候，发现，它使用到的动态效果似乎都是一样的，即鼠标进入，和鼠标离开，动态转换的是一个效果。

制作软件：EASY GIF Animator V5.1.0.44

素材原图：百度搜索得来的首先，在这里将素材原图用软件打开之后，就可以得到每一帧的分解图。我就选择了以图标中小人的提包的高度为两个静态图标。

然后，动态图标的转换就是两个静态图标的过渡转换效果。即小人的提包从最低处，慢慢摆到最高处；再从最高处慢慢摆到最低处。

最后，制作了出四张不同合格的图标。

说明：两张动态图标的时间延迟应该都是一样的。我这里使用了6帧的画面，循环一次要0.6秒。记住这个时间，一下实际编写代码的时候要用到。

实际编码：

1.新建一个“window窗体应用程序”项目。

2.添加一个PictureBox控件，Image属性设置为：静态图标1

3.添加一个Timer控件，Interval属性设置为：动态图标循环一次时间的一半，在这里我设置的是0.3秒，即300毫秒。

4.添加PictureBox的MouseEnter事件。

5.添加PictureBox的MouseLeave事件。

6.添加TimerTick事件。

全部代码如下：

 
    01using System;
 
    02using System.Drawing;
 
    03using System.Windows.Forms;
 
    04 
 
    05namespace WindowsFormsApplication1
 
    06{
 
    07    public partial class Form1 : Form
 
    08    {
 
    09        public Form1()
 
    10        {
 
    11            InitializeComponent();
 
    12        }
 
    13 
 
    14        int IconState = 0;//标记图标状态。
 
    15        private void pictureBox1_MouseEnter(object sender, EventArgs e)
 
    16        {
 
    17            timer1.Stop();
 
    18            this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.动态1;
 
    19            //this.pictureBox1.Image = Image.FromFile("动态1.gif");
 
    20            IconState = 1;
 
    21            timer1.Start();
 
    22        }
 
    23 
 
    24        private void pictureBox1_MouseLeave(object sender, EventArgs e)
 
    25        {
 
    26            timer1.Stop();
 
    27            this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.动态2;
 
    28            //this.pictureBox1.Image = Image.FromFile("动态2.gif");
 
    29            IconState = 2;
 
    30            timer1.Start();
 
    31        }
 
    32 
 
    33        private void timer1_Tick(object sender, EventArgs e)
 
    34        {
 
    35            timer1.Stop();
 
    36            switch (IconState)
 
    37            {
 
    38                case 1://图标状态1，将显示变为静态2图标
 
    39                    this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.静态2;
 
    40                    //this.pictureBox1.Image = Image.FromFile("静态2.gif");
 
    41                    break;
 
    42                case 2://图标状态2，将显示变为静态1图标
 
    43                    this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.静态1;
 
    44                    //this.pictureBox1.Image = Image.FromFile("静态1.gif");
 
    45                    break;
 
    46                default:
 
    47                    break;
 
    48 
 
    49            }
 
    50            IconState = 0;
 
    51        }
 
    52    }
 
    53}