开博第一篇作品-C#winform版《仿360杀毒》页面切换动画效果(内含源码)

C#winform版《仿360杀毒》页面切换动画效果

昨天跟一个同事聊天，谈到了360杀毒的页面效果不错，我们所做的winform页面都是拖控件还是拖控件，不能吸引客户的注意力，想改成360的样式。

今天活不多，抽空仿做了两个360杀毒的页面切换效果，其实原理很简单，这里分享出来，希望能给大家带来帮助。

期间滑动的时候，窗体是不能拖动或者点击其他的功能，这里可能是用了单线程进行了页面切换。

滑动效果

“功能大全功能”的切换效果是右到左滑入，从最右侧，迅速往左侧滑入，当快要完成切换时，有个稍微停顿的效果，接着缓冲效果到页面完全显示。

页面进入部分

页面退出时，也是右侧到左侧滑出，和滑入一样，前期是迅速往左侧滑出，当快要完成切出时，也是有个稍微的停顿效果，接着缓冲效果到页面完全消失。

页面移出部分

这个动画效果，用单线程实现就好了，实例化滑动的窗体，初始化窗体原坐标为窗口最右侧(form.Width,0)，之后使用for，while，Timer，BackgroundWork等等都可以。

我这里用了While进行单线程切换：

        private void AnimationX(Control ctrl, int x, int milliseconds){Point startPoint = ctrl.Location;int vector = x >= ctrl.Location.X ? 1 : -1;int length = Math.Abs(startPoint.X - x);if (Math.Abs(vector * length) > milliseconds)vector = vector * length / milliseconds;while ((ctrl.Location.X - x) > 0){ctrl.Location = new Point(ctrl.Location.X + vector, ctrl.Location.Y);Application.DoEvents();if (x < 0)System.Threading.Thread.Sleep(5);}ctrl.Location = new Point(x, ctrl.Location.Y);}

上下分页效果

“查杀功能”的切换效果是上下分离，页面从中间横线出分裂开，上部分向上打开，下半部分向下打开，最后显示第二个页面，这样完成了页面的切换功能。

这里如果在用单线程的话，就会出现，先上半部分向上打开后，在下半部分向下打开，这样不能够实现上下部分同时打开效果，如果在同一个方法内操作两个部分，这样就会是代码出现冗余情况。你不觉得这样写很不好吗，而且维护的话也很难，看起来也有点费劲是吧。呵呵 ^ ^

这里我用了BackgroundWork：

动画方法：

        private void AnimationY(Control ctrl, int y, int milliseconds, bool IsUp){Point startPoint = ctrl.Location;int vector = y >= ctrl.Location.Y ? 1 : -1;int length = Math.Abs(startPoint.Y - y);if (Math.Abs(vector * length) > milliseconds)vector = vector * length / milliseconds;while ((IsUp && (ctrl.Location.Y + vector) > y) || (!IsUp && (ctrl.Location.Y + vector) < y)){ctrl.Location = new Point(ctrl.Location.X, ctrl.Location.Y + vector);System.Threading.Thread.Sleep(10);Application.DoEvents();}ctrl.Location = new Point(ctrl.Location.X, y);}

上半部分的BackgroundWork：

        private void bgwTop_DoWork(object sender, DoWorkEventArgs e){int[] tem=e.Argument as int[];int Y = tem[0];int y = tem[1];int milliseconds = tem[2];bool IsUp = Convert.ToBoolean(tem[3]);int vector = y >= tem[0] ? 1 : -1;int length = Math.Abs(Y - y);if (Math.Abs(vector * length) > milliseconds)vector = vector * length / milliseconds;while ((IsUp && (Y + vector) > y) || (!IsUp && (Y + vector) < y)){bgwTop.ReportProgress(Y + vector, null);System.Threading.Thread.Sleep(25);//Application.DoEvents();Y=Y + vector;}bgwTop.ReportProgress(y, null);}private void bgwTop_ProgressChanged(object sender, ProgressChangedEventArgs e){this.lblTop.Location = new Point(this.lblTop.Location.X, e.ProgressPercentage);}

下半部分的BackgroundWork：

        private void bgwBottom_DoWork(object sender, DoWorkEventArgs e){int[] tem = e.Argument as int[];int Y = tem[0];int y = tem[1];int milliseconds = tem[2];bool IsUp = Convert.ToBoolean(tem[3]);int vector = y >= tem[0] ? 1 : -1;int length = Math.Abs(Y - y);if (Math.Abs(vector * length) > milliseconds)vector = vector * length / milliseconds;while ((IsUp && (Y + vector) > y) || (!IsUp && (Y + vector) < y)){bgwBottom.ReportProgress(Y + vector, null);System.Threading.Thread.Sleep(25);//Application.DoEvents();Y = Y + vector;}bgwBottom.ReportProgress(y, null);}private void bgwBottom_ProgressChanged(object sender, ProgressChangedEventArgs e){this.lblBottom.Location = new Point(this.lblBottom.Location.X, e.ProgressPercentage);}

作品效果图：

消除动画闪现

最后看过效果图后，是不是发现中间闪烁现象是不是很严重，不急这里我们在构造里面加上一句话就OK了。

            // 设置控件 双缓冲开启this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);

来，在自己的作品里添加上来看看效果吧。

源代码下载