CSkin博客

标题: 【360动画效果】仿360杀毒-页面切换动画效果（C#源码） [打印本页]

作者: 乔克斯 时间: 2017-1-24 11:53
标题: 【360动画效果】仿360杀毒-页面切换动画效果（C#源码）
说明：
C#winform版《仿360杀毒》页面切换动画效果昨天跟一个同事聊天，谈到了360杀毒的页面效果不错，我们所做的winform页面都是拖控件还是拖控件，不能吸引客户的注意力，想改成360的样式。
今天活不多，抽空仿做了两个360杀毒的页面切换效果，其实原理很简单，这里分享出来，希望能给大家带来帮助。期间滑动的时候，窗体是不能拖动或者点击其他的功能，这里可能是用了单线程进行了页面切换。

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

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

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

[C#] 纯文本查看 复制代码

        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：
动画方法：

[C#] 纯文本查看 复制代码

        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：

[C#] 纯文本查看 复制代码

        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：

[C#] 纯文本查看 复制代码

        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);

        }

作品效果图：

案例源码下载：

仿360杀毒页面切换动画效果.rar (1.13 MB, 下载次数: 3135, 售价: 1 金钱)

作者: mqzzzz 时间: 2017-1-24 13:46
6666666666666666666666666666

作者: zimistan 时间: 2017-1-25 16:52
谢谢了楼主

作者: 贰佰伍 时间: 2017-1-26 21:59
这个就很厉害了

作者: eddieiat 时间: 2017-2-2 17:05
乔克斯根本是大神啊

作者: 罗布斯 时间: 2017-2-8 14:57
厉害了，好东西

作者: sas 时间: 2017-2-9 14:58
厉害了，好东西

作者: qq541717868 时间: 2017-2-10 09:31
好厉害啊

作者: 123456mnk 时间: 2017-2-10 11:07
厉害，界面能做的再精致点就更完美了。

作者: 无醉 时间: 2017-2-14 09:41
谢谢了楼主

作者: tolwm 时间: 2017-2-16 10:38
感谢楼主对论坛作出的贡献

作者: longlv 时间: 2017-2-17 10:32
学习学习学习学习学习学习学习学习

作者: 杨员外 时间: 2017-2-17 15:21
这个效果很好

作者: wesson2016 时间: 2017-2-19 18:25
楼主辛苦

作者: wanghun315 时间: 2017-2-23 08:31
感谢楼主分享

作者: 炎山fire 时间: 2017-3-2 16:48
好厉害~

作者: 打不过超精兵 时间: 2017-3-3 10:30
楼主好人，666

作者: 小哲 时间: 2017-3-9 01:50
66666厉害！！！！！！！！！！！！！！

作者: g1187131137 时间: 2017-3-17 17:38
6666666666

作者: Mlegbder 时间: 2017-3-21 09:17
谢谢了楼主

作者: 1078933133aa 时间: 2017-3-28 19:16
谢谢楼主了，辛苦了

作者: liquidl 时间: 2017-4-2 00:55
学习一下，谢谢楼主分享

作者: 1256415777 时间: 2017-4-11 14:16
阿斯达所sad

作者: Champagne 时间: 2017-4-17 13:03
哇··谢谢大神

作者: root 时间: 2017-4-21 03:27
好久不见

作者: stcn52 时间: 2017-4-22 12:20
乔克斯根本是大神啊

作者: vinsent 时间: 2017-4-24 09:45
真的很不错谢谢楼主。

作者: 我要学c# 时间: 2017-4-28 10:49
你们都怎么学的阿。。。好厉害。。。啥时候才能跟你们一样厉害。。。。

作者: alimjanbay 时间: 2017-4-28 16:33
kanyikan,,,,,,,,,,,,,,,,,,,,,,,,,

作者: wintrue 时间: 2017-4-28 18:18
我今天最想说

作者: wintrue 时间: 2017-4-28 18:19
我今天最想说

作者: xingtian 时间: 2017-5-5 10:38
厉害了，好东西

作者: qdboris 时间: 2017-5-6 09:35
说实话，效果挺好

作者: biubiu2017 时间: 2017-5-20 21:05
厉害了厉害了厉害了

作者: heyulunzzz 时间: 2017-5-29 16:01
很炫！下载要金钱啊

作者: cc448 时间: 2017-6-2 21:02
66666666666

作者: kevinsteve 时间: 2017-7-29 22:20
谢谢分享，LZ辛苦了。

作者: useronce 时间: 2017-8-1 10:55
效果很炫，厉害！

作者: cannycsy 时间: 2017-8-1 14:27
如何有金币的?发信息吗？

作者: geyaodemo 时间: 2017-8-1 16:26
78888888888888888888888888888888888888888888888888888888888888888888888

作者: geyaodemo 时间: 2017-8-1 16:26
8900000000000000000000000000000000000000000000

作者: geyaodemo 时间: 2017-8-1 16:27
999999999999999999999999999999999999999999999999

作者: sky656 时间: 2017-8-9 20:37
666666666666666666

作者: 看雪飘过 时间: 2017-9-14 10:08
下载学习一下！感谢！

作者: 尕尕小孩 时间: 2017-9-26 15:04
厉害了，我的乔克斯

作者: dayer 时间: 2017-9-30 16:02
挺漂亮

作者: very2018 时间: 2017-10-10 14:50
学习一下

作者: very2018 时间: 2017-10-10 14:50
参考学习一下

作者: mgod2008 时间: 2017-11-7 22:58
这个漂亮！！

作者: zhangzhg0508 时间: 2017-11-28 10:38
一直喜欢这个控件集合

作者: QW去 时间: 2018-1-9 13:02
楼主辛苦了

作者: 15305415328 时间: 2018-1-19 18:48
功能不错，厉害

作者: soursalon 时间: 2018-1-21 19:49
好东西。。谢分享

作者: nealxu 时间: 2018-2-4 00:05
谢谢了楼主谢谢了楼主

作者: szsl666 时间: 2018-2-12 18:08
十分感谢楼主，长知识了~~展开闭合的效果很好~就是点了几次展开式以后，程序挂了，噗

作者: boxxie 时间: 2018-2-14 09:44
来还习一下C#

作者: stars 时间: 2018-3-8 20:18
多谢楼主,拿走了

作者: 君子小白 时间: 2018-3-13 15:59
好东西学习了

作者: freeloop88 时间: 2018-3-15 15:38
真的很不错，非常感谢楼主

作者: panda313 时间: 2018-4-18 10:21
非常漂亮的界面，非常感谢！

作者: 742897830 时间: 2018-4-27 22:52
好好哦,学习了.......

作者: 潜水30年 时间: 2018-5-1 09:22
厉害厉害

作者: hexbaby 时间: 2018-5-4 12:25
效果帮帮的

作者: fdsanuif 时间: 2018-5-6 22:47
666666666666

作者: jeffrey 时间: 2018-5-16 19:19
good!!很给力啊。。

作者: Flyingfish1982 时间: 2018-5-22 11:33
效果很炫酷，学习了

作者: LIQC 时间: 2018-6-12 23:20
6666666666666666666666666666

作者: xjc_ahbvc 时间: 2018-6-13 09:21
腻害了，都是技术大牛

作者: xzp132706 时间: 2018-6-22 19:55
谢啦楼主

作者: chennange 时间: 2018-6-25 11:20
看起来相当不错呵呵

作者: 梦魇霸霸 时间: 2018-7-5 19:55
233333333333333

作者: sleep_thread 时间: 2018-7-11 19:17
楼主厉害了，已下载

作者: ChristianK 时间: 2018-7-13 13:26
嗯？可是源代码在哪里呢？

作者: nexthero 时间: 2018-8-2 16:42
看上去很美，棒棒的

作者: ccwRadar 时间: 2018-8-3 10:45
不错的样子。。。。

作者: adwolf 时间: 2018-8-10 12:12
学习学习学习学习学习学习学习

作者: adwolf 时间: 2018-8-10 12:13
很好学习学习，好好学习。。。。。

作者: zfsy 时间: 2018-10-6 17:49
感谢楼主分享

作者: Topi 时间: 2018-10-18 17:26
感谢分享,LZ辛苦了~

作者: yangqianyu21 时间: 2018-11-9 20:09
可以设置窗体的背景图片吗？

作者: nthao 时间: 2018-11-19 13:29
谢谢了楼主

作者: 王平平平 时间: 2018-12-28 19:55
看看效果好不好

作者: 童冬冬 时间: 2018-12-29 12:47
请问，下载那个压缩包后，为什么会显示错误，打不开呢

作者: 万代 时间: 2019-1-9 16:13
这效果真的很给力

作者: wcjmecn 时间: 2019-1-16 10:09
666666666666666

作者: heping072054214 时间: 2019-1-16 16:49
感谢楼主分享

作者: jalonfun 时间: 2019-1-16 17:29
非常感谢您的分享

作者: 踏入VS的路上 时间: 2019-1-22 10:04
一点都不萌的新人来报道！！

作者: niil 时间: 2019-2-12 16:58
这个很厉害

作者: chuxuming 时间: 2019-2-21 15:46
dddddddddddddddd

作者: lee2k 时间: 2019-3-1 14:03
这个效果非常好！很喜欢，谢谢分享了！

作者: 山水美 时间: 2019-3-9 10:10
展示效果很吸引人，忍不住下载了，支持楼主！

作者: Madhn.zhan 时间: 2019-3-12 10:10
下载看看

作者: n091912 时间: 2019-4-3 19:31
謝謝樓主分享

作者: hzggggggg 时间: 2019-4-23 14:04
66666666666666666666666666666666666

作者: qq762965287 时间: 2019-5-20 14:09
下载试试效果，谢谢分享

作者: 执剑走天下 时间: 2019-5-26 13:18
学学习.xiexie

作者: songrsp 时间: 2019-5-29 14:52
感谢分享,LZ辛苦了~

作者: iwanke 时间: 2019-6-5 06:38
厉害厉害，向大佬学习

欢迎光临 CSkin博客 (http://bbs.cskin.net/)