开博第一篇作品-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);

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

 

源代码下载