zoukankan      html  css  js  c++  java
  • [ay原创作品]用wpf写了个模仿36Kr网站登录背景的效果

    这里我借鉴了,上周比较火的一个前端文章,人家用js去写的,地址 自己用wpf也写了一个,但是它的  粒子比较,然后连线算法真的很差,他创建了一个加入鼠标点的集合,2个集合进行比较,并且粒子会向鼠标靠近,这个存在很严重问题,如果你真心看了就知道了,粒子吸的太多了,就卡了,而我自己研究只用了一个集合,算法用的高中知识,排列组合的组合知识,   不考虑顺序的比较。当然我的效果跟他不一样,性能比他好多了。

    不要说wpf,微软不维护啥的,只是你玩的时间不多,你不会玩而已。用点心,事情就成了,ay来教你

    效果exe体验: 下载

    1静态效果图

    QQ图片20151118085735.png

     

    2动态的

    QQ图片20151118085740.gif

    整体实现思路,讲解:

    先设计个类,用于粒子,在wpf中我用Ellipse去画点,用line画连线

    粒子的几个属性,位置 x,y 两个方向的加速度 xa,ya,还有个距离属性max

     /// <summary>
        /// 粒子类
        /// </summary>
        public class GrainBase
        {
            public double? x { get; set; }
            public double? y { get; set; }
    
            public double xa { get; set; }
    
            public double ya { get; set; }
    
            public double max { get; set; }
    
        }

    第一步做出游离的ellipse  

    随机生成,x,y,xa和ya速度

         //// 添加粒子
                //// x,y为粒子坐标,xa, ya为粒子xy轴加速度,max为连线的最大距离     
                for (int i = 0; i <100; i++)
                {
                    GrainBase gb = new GrainBase();
                    gb.x = rand.NextDouble() * Cav.ActualWidth;
                    gb.y = rand.NextDouble() * Cav.ActualHeight;
                    gb.xa = rand.NextDouble() * 2 - 1;
                    gb.ya = rand.NextDouble() * 2 - 1;
                    gb.max = 8000;
                    grains.Add(gb);
                }

    第二步写出算法 计算两点距离,然后比较,是否需要line

    这里就需要定时器去不断的刷新了,这里1秒 60帧,一秒60次 DrawingAy方法

       updateTimer = new System.Windows.Threading.DispatcherTimer();
                updateTimer.Tick += new EventHandler(DrawingAY);
                updateTimer.Interval = new TimeSpan(0, 0, 0, 0, 1000 / 60);
                updateTimer.Start();

    然后线的 宽度和颜色,透明度,根据距离比设定

    所有的点都要比较,那么我用了类似 排列组合的算法中的   组合,不考虑顺序,两两比较,比如 123,三个粒子,就比较 1和2,1和3, 2和3,3次,减少次数。

     由于博客园的关系,我发誓不再用博客园了,不会再分享,谢谢了,拿到代码的同志,谢谢支持你们的支持了

    当然如果你聪明,凭借我上面给的思路和代码,你已经能够写出来了,如果需要源码,对不起了,博客园做的事情,我太愤怒,没了


    2015年11月18日 ===== AYUI       www.ayjs.net      AY         杨洋原创编写,请不要转载谢谢=======

  • 相关阅读:
    nginx proxy_set_header
    nginx minio
    /etc/nginx/sitesenabled
    IDEA从mapper.java或者dao.java跳转到mapper.xml
    htmlwebpackplugin 配置项
    第29天 [js]时间戳转换
    CSS权重值计算
    nginx+keepalived实现高可用负载均衡 繁华
    kali安装 IDEA2020 破解并创建快捷方式
    下载 android source 之repo获取
  • 原文地址:https://www.cnblogs.com/AaronYang/p/4973637.html
Copyright © 2011-2022 走看看