仿网页点阵特效

2018-11-23 14:48:29 +08:00 · 2018-11-23 14:48:29 +08:00 · c264170454
commit c264170454
parent a9f72e349e
17 changed files with 917 additions and 1 deletions
--- a/.settings/org.eclipse.core.resources.prefs
+++ b/.settings/org.eclipse.core.resources.prefs
@ -33,6 +33,7 @@ encoding//\u5217\u8868/QListWidget/\u817E\u8BAF\u89C6\u9891\u70ED\u64AD\u5217\u8
 encoding//\u5217\u8868/QListWidget/\u81EA\u5B9A\u4E49\u53EF\u62D6\u62FDItem.py=utf-8
 encoding//\u52A8\u753B/\u53F3\u952E\u83DC\u5355\u52A8\u753B.py=utf-8
 encoding//\u52A8\u753B/\u6309\u94AE\u653E\u5927\u7F29\u5C0F\u52A8\u753B.py=utf-8
+encoding//\u52A8\u753B/\u70B9\u9635\u7279\u6548/\u70B9\u9635\u7279\u6548.py=utf-8
 encoding//\u52A8\u753B/\u7A97\u53E3\u6DE1\u5165\u6DE1\u51FA.py=utf-8
 encoding//\u56FE\u5F62\u89C6\u56FE/\u4E16\u754C\u5730\u56FE/WorldMap.py=utf-8
 encoding//\u56FE\u5F62\u89C6\u56FE/\u663E\u793A\u56FE\u7247\u53CA\u7F29\u653E.py=utf-8
--- a/README.md
+++ b/README.md
@ -134,6 +134,7 @@

 1. [淡入淡出](动画/淡入淡出.py)
 1. [右键菜单动画](动画/右键菜单动画.py)
+1. [仿网页点阵特效](动画/点阵特效)

 ## [图表](图表)

--- a/动画/README.md
+++ b/动画/README.md
@ -49,4 +49,78 @@ def resizeEvent(self, event):
    self.button2.updatePos()
 ```

-![截图](ScreenShot/按钮放大缩小动画.gif)
+![截图](ScreenShot/按钮放大缩小动画.gif)
+
+## [4、点阵特效](点阵特效.py)
+
+1. emmm,我也不知道这个动画叫啥名字,反正就是仿照网页做的
+1. 参考js源码,大概的原理就是:
+    1. 先根据窗口大小随机创建一些点
+    1. 遍历这些点找到跟它自己关联的点
+    1. 动画开始画圆点、画连线
+    1. 动画改变这些点的透明度, 用到了属性动画`QPropertyAnimation`
+1. 这里没有仔细去研究js里的算法优化,在浏览器里嗖嗖的就生成了,在py里好慢....
+1. 尽量在py里优化了循环操作,也简单的做了个cython加速也才提高了1s ? 1倍?...
+1. 不要为了xx用这玩意儿,和网页的效果一样,占CPU !!!!!!
+1. 如果有更好的优化算法请告知, 3Q
+1. PS: pyd是python3.4生成的,删掉pyd也能运行
+
+这部分是js的核心
+```js
+// for each point find the 5 closest points
+for(var i = 0; i < points.length; i++) {
+    var closest = [];
+    var p1 = points[i];
+    for(var j = 0; j < points.length; j++) {
+        var p2 = points[j]
+        if(!(p1 == p2)) {
+            var placed = false;
+            for(var k = 0; k < 5; k++) {
+                if(!placed) {
+                    if(closest[k] == undefined) {
+                        closest[k] = p2;
+                        placed = true;
+                    }
+                }
+            }
+
+            for(var k = 0; k < 5; k++) {
+                if(!placed) {
+                    if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
+                        closest[k] = p2;
+                        placed = true;
+                    }
+                }
+            }
+        }
+    }
+    p1.closest = closest;
+}
+```
+
+这部分是py的核心
+```python
+def findClose(points):
+    plen = len(points)
+    for i in range(plen):
+        closest = [None, None, None, None, None]
+        p1 = points[i]
+        for j in range(plen):
+            p2 = points[j]
+            dte1 = getDistance(p1, p2)
+            if p1 != p2:
+                placed = False
+                for k in range(5):
+                    if not placed:
+                        if not closest[k]:
+                            closest[k] = p2
+                            placed = True
+                for k in range(5):
+                    if not placed:
+                        if dte1 < getDistance(p1, closest[k]):
+                            closest[k] = p2
+                            placed = True
+        p1.closest = closest
+```
+
+![截图](ScreenShot/点阵特效.gif)
--- a/动画/ScreenShot/点阵特效.gif
+++ b/动画/ScreenShot/点阵特效.gif
--- a/动画/点阵特效/html/css/component.css
+++ b/动画/点阵特效/html/css/component.css
@ -0,0 +1,102 @@
+/* Header */
+.large-header {
+	position: relative;
+	width: 100%;
+	background: #333;
+	overflow: hidden;
+	background-size: cover;
+	background-position: center center;
+	z-index: 1;
+}
+
+.demo-1 .large-header {
+	background-image: url('../img/demo-1-bg.jpg');
+}
+
+.demo-2 .large-header {
+	background-image: url('../img/demo-2-bg.jpg');
+	background-position: center bottom;
+}
+
+.demo-3 .large-header {
+	background: #7f8c8d;
+}
+
+.demo-4 .large-header {
+	background: #f9f1e9;
+}
+
+.main-title {
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	color: #f9f1e9;
+	text-align: center;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate3d(-50%,-50%,0);
+	transform: translate3d(-50%,-50%,0);
+}
+
+.demo-1 .main-title, 
+.demo-3 .main-title {
+	text-transform: uppercase;
+	font-size: 4.2em;
+	letter-spacing: 0.1em;
+}
+
+.demo-2 .main-title {
+	font-family: 'Clicker Script', cursive;
+	font-weight: normal;
+	font-size: 8em;
+	padding-left: 10px;
+	text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
+}
+
+.demo-2 .main-title::before {
+	content: '';
+	width: 20vw;
+	height: 20vw;
+	min-width: 3.5em;
+	min-height: 3.5em;
+	background: url(../img/deco.svg) no-repeat center center;
+	background-size: cover;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	border-radius: 50%;
+	z-index: -1;
+	-webkit-transform: translate3d(-50%,-50%,0);
+	transform: translate3d(-50%,-50%,0);
+}
+
+.demo-3 .main-title {
+	padding: 10px 40px;
+	border: 10px double #f9f1e9;
+	text-transform: uppercase;
+	font-family: Londrina Outline, sans-serif;
+}
+
+.demo-4 .main-title {
+	font-size: 6em;
+	font-weight: 300;
+	padding: 10px 30px;
+	text-transform: uppercase;
+	color: #222;
+}
+
+.main-title .thin {
+	font-weight: 200;
+}
+
+@media only screen and (max-width : 768px) {
+	.demo-1 .main-title, 
+	.demo-3 .main-title,
+	.demo-4 .main-title {
+		font-size: 3em;
+	}
+
+	.demo-2 .main-title {
+		font-size: 4em;
+	}
+}
--- a/动画/点阵特效/html/css/demo.css
+++ b/动画/点阵特效/html/css/demo.css
@ -0,0 +1,195 @@
+@font-face {
+	font-weight: normal;
+	font-style: normal;
+	font-family: 'codropsicons';
+	src:url('../fonts/codropsicons/codropsicons.eot');
+	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
+		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
+		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
+		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
+}
+
+*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
+.clearfix:before, .clearfix:after { content: ''; display: table; }
+.clearfix:after { clear: both; }
+
+body {
+	background: #fff;
+	color: #383a3c;
+	font-weight: 400;
+	font-size: 1em;
+	line-height: 1.25;
+	font-family: 'Raleway', Calibri, Arial, sans-serif;
+}
+
+a, button {
+	outline: none;
+}
+
+a {
+	color: #566473;
+	text-decoration: none;
+}
+
+a:hover, a:focus {
+	color: #34495e;
+}
+
+section {
+	padding: 1em;
+	text-align: center;
+}
+
+p.ref {
+	text-align: center;
+	padding: 2em 1em;
+}
+
+/* Header */
+.codrops-header {
+	margin: 0 auto;
+	padding: 2em;
+	text-align: center;
+	max-width: 900px;
+}
+
+.codrops-header h1 {
+	margin: 0;
+	font-size: 4.5em;
+	line-height: 1;
+	font-weight: 200;
+}
+
+.codrops-header h1 span {
+	display: block;
+	padding: 1em 0 1.5em;
+	font-size: 36%;
+	color: #95a5a6;
+	line-height: 1.4;
+}
+
+/* To Navigation Style */
+.codrops-top {
+	width: 100%;
+	text-transform: uppercase;
+	font-weight: 700;
+	font-size: 0.69em;
+	text-align: center;
+	padding: 3em 0;
+}
+
+.codrops-top a {
+	display: inline-block;
+	padding: 1.5em;
+	text-decoration: none;
+	letter-spacing: 1px;
+}
+
+.codrops-icon:before {
+	margin: 0 4px;
+	text-transform: none;
+	font-weight: normal;
+	font-style: normal;
+	font-variant: normal;
+	font-family: 'codropsicons';
+	line-height: 1;
+	speak: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+.codrops-icon-drop:before {
+	content: "\e001";
+}
+
+.codrops-icon-prev:before {
+	content: "\e004";
+}
+
+/* Demo Buttons Style */
+.codrops-demos {
+	padding-top: 1em;
+	font-size: 0.8em;
+}
+
+.codrops-demos a {
+	display: inline-block;
+	margin: 0.35em 0.1em;
+	padding: 0.5em 1.2em;
+	outline: none;
+	text-decoration: none;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-weight: 700;
+	border-radius: 2px;
+	font-size: 110%;
+	border: 2px solid transparent;
+}
+
+.codrops-demos a:hover,
+.codrops-demos a.current-demo {
+	border-color: #383a3c;
+}
+
+.codrops-demos h3 {
+	margin: 0;
+	padding: 1em 0 0.5em 0;
+	font-size: 0.9em;
+	float: left;
+	min-width: 90px;
+	clear: left;
+}
+
+.codrops-demos div:not(:first-child) h3 {
+	padding-top: 2em;
+}
+
+.codrops-demos a:hover,
+.codrops-demos a.current-demo {
+	color: inherit;
+	border-color: initial;
+}
+
+/* Related demos */
+.related {
+	padding: 10em 0;
+}
+
+.related p {
+	font-size: 1.5em;
+}
+
+.related > a {
+	display: inline-block;
+	text-align: center;
+	margin: 20px 10px;
+	padding: 25px;
+	vertical-align: middle;
+}
+
+.related a img {
+	max-width: 100%;
+	opacity: 0.8;
+	border-radius: 10px;
+}
+
+.related a:hover img,
+.related a:active img {
+	opacity: 1;
+}
+
+.related a h3 {
+	margin: 0;
+	min-height: 63px;
+	padding: 0.5em 0 0.3em;
+	max-width: 300px;
+	text-align: center;
+	font-weight: 400;
+	font-size: 1em;
+}
+
+@media screen and (max-width: 40em) {
+
+	.codrops-header h1 {
+		font-size: 2.5em;
+	}
+}
--- a/动画/点阵特效/html/css/normalize.css
+++ b/动画/点阵特效/html/css/normalize.css
@ -0,0 +1 @@
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
--- a/动画/点阵特效/html/img/demo-1-bg.jpg
+++ b/动画/点阵特效/html/img/demo-1-bg.jpg
--- a/动画/点阵特效/html/index.html
+++ b/动画/点阵特效/html/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title></title>
+        <link rel="stylesheet" type="text/css" href="css/normalize.css">
+        <link rel="stylesheet" type="text/css" href="css/demo.css">
+        <link rel="stylesheet" type="text/css" href="css/component.css">
+    </head>
+    <body>
+        <div class="container demo-1">
+            <div class="content">
+                <div id="large-header" class="large-header">
+                    <canvas id="demo-canvas"></canvas>
+                </div>
+            </div>
+        </div>
+        <!-- /container -->
+        <script src="js/TweenLite.min.js"></script>
+        <script src="js/EasePack.min.js"></script>
+        <script src="js/rAF.js"></script>
+        <script src="js/demo-1.js"></script>
+    </body>
+</html>
--- a/动画/点阵特效/html/js/EasePack.min.js
+++ b/动画/点阵特效/html/js/EasePack.min.js
@ -0,0 +1,12 @@
+/*!
+ * VERSION: beta 1.9.4
+ * DATE: 2014-07-17
+ * UPDATES AND DOCS AT: http://www.greensock.com
+ *
+ * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
+ * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
+ * Club GreenSock members, the software agreement that was issued with your membership.
+ * 
+ * @author: Jack Doyle, jack@greensock.com
+ **/
+var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.Back",["easing.Ease"],function(t){var e,i,s,r=_gsScope.GreenSockGlobals||_gsScope,n=r.com.greensock,a=2*Math.PI,o=Math.PI/2,h=n._class,l=function(e,i){var s=h("easing."+e,function(){},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,s},_=t.register||function(){},u=function(t,e,i,s){var r=h("easing."+t,{easeOut:new e,easeIn:new i,easeInOut:new s},!0);return _(r,t),r},c=function(t,e,i){this.t=t,this.v=e,i&&(this.next=i,i.prev=this,this.c=i.v-e,this.gap=i.t-t)},p=function(e,i){var s=h("easing."+e,function(t){this._p1=t||0===t?t:1.70158,this._p2=1.525*this._p1},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,r.config=function(t){return new s(t)},s},f=u("Back",p("BackOut",function(t){return(t-=1)*t*((this._p1+1)*t+this._p1)+1}),p("BackIn",function(t){return t*t*((this._p1+1)*t-this._p1)}),p("BackInOut",function(t){return 1>(t*=2)?.5*t*t*((this._p2+1)*t-this._p2):.5*((t-=2)*t*((this._p2+1)*t+this._p2)+2)})),m=h("easing.SlowMo",function(t,e,i){e=e||0===e?e:.7,null==t?t=.7:t>1&&(t=1),this._p=1!==t?e:0,this._p1=(1-t)/2,this._p2=t,this._p3=this._p1+this._p2,this._calcEnd=i===!0},!0),d=m.prototype=new t;return d.constructor=m,d.getRatio=function(t){var e=t+(.5-t)*this._p;return this._p1>t?this._calcEnd?1-(t=1-t/this._p1)*t:e-(t=1-t/this._p1)*t*t*t*e:t>this._p3?this._calcEnd?1-(t=(t-this._p3)/this._p1)*t:e+(t-e)*(t=(t-this._p3)/this._p1)*t*t*t:this._calcEnd?1:e},m.ease=new m(.7,.7),d.config=m.config=function(t,e,i){return new m(t,e,i)},e=h("easing.SteppedEase",function(t){t=t||1,this._p1=1/t,this._p2=t+1},!0),d=e.prototype=new t,d.constructor=e,d.getRatio=function(t){return 0>t?t=0:t>=1&&(t=.999999999),(this._p2*t>>0)*this._p1},d.config=e.config=function(t){return new e(t)},i=h("easing.RoughEase",function(e){e=e||{};for(var i,s,r,n,a,o,h=e.taper||"none",l=[],_=0,u=0|(e.points||20),p=u,f=e.randomize!==!1,m=e.clamp===!0,d=e.template instanceof t?e.template:null,g="number"==typeof e.strength?.4*e.strength:.4;--p>-1;)i=f?Math.random():1/u*p,s=d?d.getRatio(i):i,"none"===h?r=g:"out"===h?(n=1-i,r=n*n*g):"in"===h?r=i*i*g:.5>i?(n=2*i,r=.5*n*n*g):(n=2*(1-i),r=.5*n*n*g),f?s+=Math.random()*r-.5*r:p%2?s+=.5*r:s-=.5*r,m&&(s>1?s=1:0>s&&(s=0)),l[_++]={x:i,y:s};for(l.sort(function(t,e){return t.x-e.x}),o=new c(1,1,null),p=u;--p>-1;)a=l[p],o=new c(a.x,a.y,o);this._prev=new c(0,0,0!==o.t?o:o.next)},!0),d=i.prototype=new t,d.constructor=i,d.getRatio=function(t){var e=this._prev;if(t>e.t){for(;e.next&&t>=e.t;)e=e.next;e=e.prev}else for(;e.prev&&e.t>=t;)e=e.prev;return this._prev=e,e.v+(t-e.t)/e.gap*e.c},d.config=function(t){return new i(t)},i.ease=new i,u("Bounce",l("BounceOut",function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375}),l("BounceIn",function(t){return 1/2.75>(t=1-t)?1-7.5625*t*t:2/2.75>t?1-(7.5625*(t-=1.5/2.75)*t+.75):2.5/2.75>t?1-(7.5625*(t-=2.25/2.75)*t+.9375):1-(7.5625*(t-=2.625/2.75)*t+.984375)}),l("BounceInOut",function(t){var e=.5>t;return t=e?1-2*t:2*t-1,t=1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375,e?.5*(1-t):.5*t+.5})),u("Circ",l("CircOut",function(t){return Math.sqrt(1-(t-=1)*t)}),l("CircIn",function(t){return-(Math.sqrt(1-t*t)-1)}),l("CircInOut",function(t){return 1>(t*=2)?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)})),s=function(e,i,s){var r=h("easing."+e,function(t,e){this._p1=t||1,this._p2=e||s,this._p3=this._p2/a*(Math.asin(1/this._p1)||0)},!0),n=r.prototype=new t;return n.constructor=r,n.getRatio=i,n.config=function(t,e){return new r(t,e)},r},u("Elastic",s("ElasticOut",function(t){return this._p1*Math.pow(2,-10*t)*Math.sin((t-this._p3)*a/this._p2)+1},.3),s("ElasticIn",function(t){return-(this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2))},.3),s("ElasticInOut",function(t){return 1>(t*=2)?-.5*this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2):.5*this._p1*Math.pow(2,-10*(t-=1))*Math.sin((t-this._p3)*a/this._p2)+1},.45)),u("Expo",l("ExpoOut",function(t){return 1-Math.pow(2,-10*t)}),l("ExpoIn",function(t){return Math.pow(2,10*(t-1))-.001}),l("ExpoInOut",function(t){return 1>(t*=2)?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))})),u("Sine",l("SineOut",function(t){return Math.sin(t*o)}),l("SineIn",function(t){return-Math.cos(t*o)+1}),l("SineInOut",function(t){return-.5*(Math.cos(Math.PI*t)-1)})),h("easing.EaseLookup",{find:function(e){return t.map[e]}},!0),_(r.SlowMo,"SlowMo","ease,"),_(i,"RoughEase","ease,"),_(e,"SteppedEase","ease,"),f},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
--- a/动画/点阵特效/html/js/TweenLite.min.js
+++ b/动画/点阵特效/html/js/TweenLite.min.js
--- a/动画/点阵特效/html/js/demo-1.js
+++ b/动画/点阵特效/html/js/demo-1.js
@ -0,0 +1,185 @@
+(function() {
+
+    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
+
+    // Main
+    initHeader();
+    initAnimation();
+    addListeners();
+
+    function initHeader() {
+        width = window.innerWidth;
+        height = window.innerHeight;
+        target = {x: width/2, y: height/2};
+
+        largeHeader = document.getElementById('large-header');
+        largeHeader.style.height = height+'px';
+
+        canvas = document.getElementById('demo-canvas');
+        canvas.width = width;
+        canvas.height = height;
+        ctx = canvas.getContext('2d');
+
+        // create points
+        points = [];
+        for(var x = 0; x < width; x = x + width/20) {
+            for(var y = 0; y < height; y = y + height/20) {
+                var px = x + Math.random()*width/20;
+                var py = y + Math.random()*height/20;
+                var p = {x: px, originX: px, y: py, originY: py };
+                points.push(p);
+            }
+        }
+
+        // for each point find the 5 closest points
+        for(var i = 0; i < points.length; i++) {
+            var closest = [];
+            var p1 = points[i];
+            for(var j = 0; j < points.length; j++) {
+                var p2 = points[j]
+                if(!(p1 == p2)) {
+                    var placed = false;
+                    for(var k = 0; k < 5; k++) {
+                        if(!placed) {
+                            if(closest[k] == undefined) {
+                                closest[k] = p2;
+                                placed = true;
+                            }
+                        }
+                    }
+
+                    for(var k = 0; k < 5; k++) {
+                        if(!placed) {
+                            if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
+                                closest[k] = p2;
+                                placed = true;
+                            }
+                        }
+                    }
+                }
+            }
+            p1.closest = closest;
+        }
+
+        // assign a circle to each point
+        for(var i in points) {
+            var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
+            points[i].circle = c;
+        }
+    }
+
+    // Event handling
+    function addListeners() {
+        //if(!('ontouchstart' in window)) {
+            window.addEventListener('mousemove', mouseMove);
+        //}
+        window.addEventListener('scroll', scrollCheck);
+        window.addEventListener('resize', resize);
+    }
+
+    function mouseMove(e) {
+        var posx = posy = 0;
+        if (e.pageX || e.pageY) {
+            posx = e.pageX;
+            posy = e.pageY;
+        }
+        else if (e.clientX || e.clientY)    {
+            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+        }
+        target.x = posx;
+        target.y = posy;
+    }
+
+    function scrollCheck() {
+        if(document.body.scrollTop > height) animateHeader = false;
+        else animateHeader = true;
+    }
+
+    function resize() {
+        width = window.innerWidth;
+        height = window.innerHeight;
+        largeHeader.style.height = height+'px';
+        canvas.width = width;
+        canvas.height = height;
+    }
+
+    // animation
+    function initAnimation() {
+        animate();
+        for(var i in points) {
+            shiftPoint(points[i]);
+        }
+    }
+
+    function animate() {
+        if(animateHeader) {
+            ctx.clearRect(0,0,width,height);
+            for(var i in points) {
+                // detect points in range
+                if(Math.abs(getDistance(target, points[i])) < 4000) {
+                    points[i].active = 0.3;
+                    points[i].circle.active = 0.6;
+                } else if(Math.abs(getDistance(target, points[i])) < 20000) {
+                    points[i].active = 0.1;
+                    points[i].circle.active = 0.3;
+                } else if(Math.abs(getDistance(target, points[i])) < 40000) {
+                    points[i].active = 0.02;
+                    points[i].circle.active = 0.1;
+                } else {
+                    points[i].active = 0;
+                    points[i].circle.active = 0;
+                }
+
+                drawLines(points[i]);
+                points[i].circle.draw();
+            }
+        }
+        requestAnimationFrame(animate);
+    }
+
+    function shiftPoint(p) {
+        TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
+            y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
+            onComplete: function() {
+                shiftPoint(p);
+            }});
+    }
+
+    // Canvas manipulation
+    function drawLines(p) {
+        if(!p.active) return;
+        for(var i in p.closest) {
+            ctx.beginPath();
+            ctx.moveTo(p.x, p.y);
+            ctx.lineTo(p.closest[i].x, p.closest[i].y);
+            ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
+            ctx.stroke();
+        }
+    }
+
+    function Circle(pos,rad,color) {
+        var _this = this;
+
+        // constructor
+        (function() {
+            _this.pos = pos || null;
+            _this.radius = rad || null;
+            _this.color = color || null;
+        })();
+
+        this.draw = function() {
+            if(!_this.active) return;
+            ctx.beginPath();
+            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
+            ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
+            ctx.fill();
+        };
+    }
+
+    // Util
+    function getDistance(p1, p2) {
+        return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
+    }
+    
+})();
--- a/动画/点阵特效/html/js/rAF.js
+++ b/动画/点阵特效/html/js/rAF.js
@ -0,0 +1,31 @@
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+// MIT license
+
+(function() {
+    var lastTime = 0;
+    var vendors = ['ms', 'moz', 'webkit', 'o'];
+    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
+            || window[vendors[x]+'CancelRequestAnimationFrame'];
+    }
+
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function(callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+                timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
+
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function(id) {
+            clearTimeout(id);
+        };
+}());
--- a/动画/点阵特效/pointtool.pyd
+++ b/动画/点阵特效/pointtool.pyd
--- a/动画/点阵特效/pointtool.pyx
+++ b/动画/点阵特效/pointtool.pyx
@ -0,0 +1,31 @@
+from libc.math cimport pow
+
+
+def getDistance(p1, p2):
+    return pow(p1.x - p2.x, 2) + pow(p1.y - p2.y, 2)
+
+
+def findClose(points):
+    cdef int plen = len(points)
+    cdef int i = 0
+    cdef int j = 0
+    cdef int k = 0
+    for i from 0 < i < plen:
+        closest = [None, None, None, None, None]
+        p1 = points[i]
+        for j from 0 < j < plen:
+            p2 = points[j]
+            dte1 = getDistance(p1, p2)
+            if p1 != p2:
+                placed = False
+                for k from 0 < k < 5:
+                    if not placed:
+                        if not closest[k]:
+                            closest[k] = p2
+                            placed = True
+                for k from 0 < k < 5:
+                    if not placed:
+                        if dte1 < getDistance(p1, closest[k]):
+                            closest[k] = p2
+                            placed = True
+        p1.closest = closest
--- a/动画/点阵特效/setup.py
+++ b/动画/点阵特效/setup.py
@ -0,0 +1,17 @@
+# from distutils.core import setup, Extension
+# 
+# from Cython.Distutils import build_ext
+# 
+# 
+# setup(
+#     cmdclass={'build_ext': build_ext},
+#     ext_modules=[Extension("pointtool", sources=[
+#                            "pointtool.pyx"], language="c")]
+# )
+
+from distutils.core import setup
+from Cython.Build import cythonize
+
+setup(
+    ext_modules=cythonize("pointtool.pyx"),
+)
--- a/动画/点阵特效/点阵特效.py
+++ b/动画/点阵特效/点阵特效.py
@ -0,0 +1,228 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+"""
+Created on 2018年11月22日
+@author: Irony
+@site: https://pyqt5.com, https://github.com/892768447
+@email: 892768447@qq.com
+@file: 
+@description: 
+"""
+from random import random
+from time import time
+
+from PyQt5.QtCore import QPropertyAnimation, QObject, pyqtProperty, QEasingCurve,\
+    Qt, QRectF, pyqtSignal
+from PyQt5.QtGui import QColor, QPainterPath, QPainter
+from PyQt5.QtWidgets import QWidget
+
+
+__Author__ = """By: Irony
+QQ: 892768447
+Email: 892768447@qq.com"""
+__Copyright__ = 'Copyright (c) 2018 Irony'
+__Version__ = 1.0
+
+
+try:
+    import pointtool  # @UnusedImport @UnresolvedImport
+    getDistance = pointtool.getDistance
+    findClose = pointtool.findClose
+except:
+    import math
+
+    def getDistance(p1, p2):
+        return math.pow(p1.x - p2.x, 2) + math.pow(p1.y - p2.y, 2)
+
+    def findClose(points):
+        plen = len(points)
+        for i in range(plen):
+            closest = [None, None, None, None, None]
+            p1 = points[i]
+            for j in range(plen):
+                p2 = points[j]
+                dte1 = getDistance(p1, p2)
+                if p1 != p2:
+                    placed = False
+                    for k in range(5):
+                        if not placed:
+                            if not closest[k]:
+                                closest[k] = p2
+                                placed = True
+                    for k in range(5):
+                        if not placed:
+                            if dte1 < getDistance(p1, closest[k]):
+                                closest[k] = p2
+                                placed = True
+            p1.closest = closest
+
+
+class Target:
+
+    def __init__(self, x, y):
+        self.x = x
+        self.y = y
+
+
+class Point(QObject):
+
+    valueChanged = pyqtSignal()
+
+    def __init__(self, x, ox, y, oy, *args, **kwargs):
+        super(Point, self).__init__(*args, **kwargs)
+        self.__x = x
+        self._x = x
+        self.originX = ox
+        self._y = y
+        self.__y = y
+        self.originY = oy
+        # 5个闭合点
+        self.closest = [0, 0, 0, 0, 0]
+        # 圆半径
+        self.radius = 2 + random() * 2
+        # 连线颜色
+        self.lineColor = QColor(156, 217, 249)
+        # 圆颜色
+        self.circleColor = QColor(156, 217, 249)
+
+    def initAnimation(self):
+        # 属性动画
+        if not hasattr(self, 'xanimation'):
+            self.xanimation = QPropertyAnimation(
+                self, b'x', self, valueChanged=self.valueChanged.emit,
+                easingCurve=QEasingCurve.InOutSine)
+            self.yanimation = QPropertyAnimation(
+                self, b'y', self, valueChanged=self.valueChanged.emit,
+                easingCurve=QEasingCurve.InOutSine,
+                finished=self.updateAnimation)
+            self.updateAnimation()
+
+    def updateAnimation(self):
+        self.xanimation.stop()
+        self.yanimation.stop()
+        duration = (1 + random()) * 1000
+        self.xanimation.setDuration(duration)
+        self.yanimation.setDuration(duration)
+        self.xanimation.setStartValue(self.__x)
+        self.xanimation.setEndValue(self.originX - 50 + random() * 100)
+        self.yanimation.setStartValue(self.__y)
+        self.yanimation.setEndValue(self.originY - 50 + random() * 100)
+        self.xanimation.start()
+        self.yanimation.start()
+
+    @pyqtProperty(float)
+    def x(self):
+        return self._x
+
+    @x.setter
+    def x(self, x):
+        self._x = x
+
+    @pyqtProperty(float)
+    def y(self):
+        return self._y
+
+    @y.setter
+    def y(self, y):
+        self._y = y
+
+
+class Window(QWidget):
+
+    def __init__(self, *args, **kwargs):
+        super(Window, self).__init__(*args, **kwargs)
+        self.setMouseTracking(True)
+        self.resize(800, 600)
+        self.points = []
+        self.target = Target(self.width() / 2, self.height() / 2)
+        self.initPoints()
+
+    def paintEvent(self, event):
+        super(Window, self).paintEvent(event)
+        painter = QPainter()
+        painter.begin(self)
+        painter.setRenderHint(QPainter.Antialiasing)
+        painter.fillRect(self.rect(), Qt.black)
+        self.animate(painter)
+        painter.end()
+
+    def mouseMoveEvent(self, event):
+        super(Window, self).mouseMoveEvent(event)
+        # 鼠标移动时更新xy坐标
+        self.target.x = event.x()
+        self.target.y = event.y()
+        self.update()
+
+    def initPoints(self):
+        t = time()
+        self.points.clear()
+        # 创建点
+        stepX = self.width() / 20
+        stepY = self.height() / 20
+        for x in range(0, self.width(), int(stepX)):
+            for y in range(0, self.height(), int(stepY)):
+                ox = x + random() * stepX
+                oy = y + random() * stepY
+                point = Point(ox, ox, oy, oy)
+                point.valueChanged.connect(self.update)
+                self.points.append(point)
+        print(time() - t)
+
+        t = time()
+        # 每个点寻找5个闭合点
+        findClose(self.points)
+        print(time() - t)
+
+    def animate(self, painter):
+        for p in self.points:
+            # 检测点的范围
+            value = abs(getDistance(self.target, p))
+            if value < 4000:
+                # 其实就是修改颜色透明度
+                p.lineColor.setAlphaF(0.3)
+                p.circleColor.setAlphaF(0.6)
+            elif value < 20000:
+                p.lineColor.setAlphaF(0.1)
+                p.circleColor.setAlphaF(0.3)
+            elif value < 40000:
+                p.lineColor.setAlphaF(0.02)
+                p.circleColor.setAlphaF(0.1)
+            else:
+                p.lineColor.setAlphaF(0)
+                p.circleColor.setAlphaF(0)
+
+            # 画线条
+            if p.lineColor.alpha():
+                for pc in p.closest:
+                    if not pc:
+                        continue
+                    path = QPainterPath()
+                    path.moveTo(p.x, p.y)
+                    path.lineTo(pc.x, pc.y)
+                    painter.save()
+                    painter.setPen(p.lineColor)
+                    painter.drawPath(path)
+                    painter.restore()
+
+            # 画圆
+            painter.save()
+            painter.setPen(Qt.NoPen)
+            painter.setBrush(p.circleColor)
+            painter.drawRoundedRect(QRectF(
+                p.x - p.radius, p.y - p.radius, 2 * p.radius, 2 * p.radius), p.radius, p.radius)
+            painter.restore()
+
+            # 开启动画
+            p.initAnimation()
+
+
+if __name__ == '__main__':
+    import sys
+    import cgitb
+    sys.excepthook = cgitb.enable(1, None, 5, '')
+    from PyQt5.QtWidgets import QApplication
+    app = QApplication(sys.argv)
+    w = Window()
+    w.show()
+    sys.exit(app.exec_())
				`@ -0,0 +1 @@`
				article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}