| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>particle nets</title> | |
| <style> | |
| html,body{ | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| overflow: hidden;} | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="cas"></canvas> | |
| <script> | |
| var canvas = document.getElementById("cas"); | |
| var ctx = canvas.getContext("2d"); | |
| resize(); | |
| window.onresize = resize; | |
| function resize(){ | |
| canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | |
| canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; | |
| } | |
| var RAF = (function () { | |
| return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { | |
| window.setTimeout(callback, 1000 / 60); | |
| }; | |
| })(); | |
| // 鼠標活動時，獲取鼠標座標 | |
| var warea = {x: null, y: null, max: 20000}; | |
| window.onmousemove = function(e){ | |
| e = e || window.event; | |
| warea.x = e.clientX; | |
| warea.y = e.clientY; | |
| }; | |
| window.onmouseout = function(e){ | |
| warea.x = null; | |
| warea.y = null; | |
| }; | |
| // 添加粒子 | |
| // x，y爲粒子座標，xa, ya爲粒子xy軸加速度，max爲連線的最大距離 | |
| var dots = []; | |
| for(var i=0;i<300;i++){ | |
| var x = Math.random()*canvas.width; | |
| var y = Math.random()*canvas.height; | |
| var xa = Math.random() * 2 - 1; | |
| var ya = Math.random() * 2 - 1; | |
| dots.push({ | |
| x: x, | |
| y: y, | |
| xa: xa, | |
| ya: ya, | |
| max: 6000 | |
| }) | |
| } | |
| // 延遲100秒開始執行動畫，如果立即執行有時位置計算會出錯 | |
| setTimeout(function(){ | |
| animate(); | |
| }, 100); | |
| // 每一幀循環的邏輯 | |
| function animate(){ | |
| ctx.clearRect(0,0,canvas.width, canvas.height); | |
| // 將鼠標座標添加進去，產生一個用於比對距離的點數組 | |
| var ndots = [warea].concat(dots); | |
| dots.forEach(function(dot){ | |
| // 粒子位移 | |
| dot.x += dot.xa; | |
| dot.y += dot.ya; | |
| // 遇到邊界將加速度反向 | |
| dot.xa *= (dot.x > canvas.width || dot.x < 0)? -1 : 1; | |
| dot.ya *= (dot.y > canvas.height || dot.y < 0)? -1 : 1; | |
| // 繪製點 | |
| ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1); | |
| // 循環比對粒子間的距離 | |
| for (var i = 0; i < ndots.length; i++) { | |
| var d2 = ndots[i]; | |
| if (dot === d2 || d2.x === null || d2.y === null) continue; | |
| var xc = dot.x - d2.x; | |
| var yc = dot.y - d2.y; | |
| // 兩個粒子之間的距離 | |
| var dis = xc * xc + yc * yc; | |
| // 距離比 | |
| var ratio; | |
| // 如果兩個粒子之間的距離小於粒子對象的max值，則在兩個粒子間畫線 | |
| if(dis < d2.max){ | |
| // 如果是鼠標，則讓粒子向鼠標的位置移動 | |
| if (d2 === warea && dis > (d2.max / 2)) { | |
| dot.x -= xc * 0.03; | |
| dot.y -= yc * 0.03; | |
| } | |
| // 計算距離比 | |
| ratio = (d2.max - dis) / d2.max; | |
| // 畫線 | |
| ctx.beginPath(); | |
| ctx.lineWidth = ratio/2; | |
| ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')'; | |
| ctx.moveTo(dot.x , dot.y); | |
| ctx.lineTo(d2.x , d2.y); | |
| ctx.stroke(); | |
| } | |
| } | |
| // 將已經計算過的粒子從數組中刪除 | |
| ndots.splice(ndots.indexOf(dot), 1); | |
| }); | |
| RAF(animate); | |
| } | |
| </script> | |
| </body> | |
| </html> |
轉載：值得回味的H5 離子 小動畫
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
MUI 5+plus 獲取APP根目錄
/* 功能:獲取App根目錄 實例:app.getRoot() 當前訪問路徑：/page/index.html，結果：../ 當前訪問路徑：/page/child/index.html，結果：../.