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

引言：

迅雷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事件。

全部代码如下：

using System;
using System.Drawing;
using System.Windows.Forms;namespace WindowsFormsApplication1
{public partial class Form1 : Form{public Form1(){InitializeComponent();}int IconState = 0;//标记图标状态。private void pictureBox1_MouseEnter(object sender, EventArgs e){timer1.Stop();this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.动态1;//this.pictureBox1.Image = Image.FromFile("动态1.gif");IconState = 1;timer1.Start();}private void pictureBox1_MouseLeave(object sender, EventArgs e){timer1.Stop();this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.动态2;//this.pictureBox1.Image = Image.FromFile("动态2.gif");IconState = 2;timer1.Start();}private void timer1_Tick(object sender, EventArgs e){timer1.Stop();switch (IconState){case 1://图标状态1，将显示变为静态2图标this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.静态2;//this.pictureBox1.Image = Image.FromFile("静态2.gif");break;case 2://图标状态2，将显示变为静态1图标this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.静态1;//this.pictureBox1.Image = Image.FromFile("静态1.gif");break;default:break;}IconState = 0;}}
}

界面显示效果如下：

源代码下载：

迅雷7动态图标按钮模拟.zip

[By:Asion Tang]
2011年3月12日 14:24:48