转载:值得回味的H5 离子 小动画

转载 2015年11月17日 23:00:09
<!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小动画,分享一下!!

new document   charset="utf-8"/>                 var b...

【C++源码】基于Win32窗口编程实现的小动画

翻开3年前刚接触计算机编程时作为练习写下的小动画源码,仿佛又回去那段充满乐趣的学习阶段,那时每当写完一个小程序都会有一种发自内心的自豪,都会有问自己离真正的程序员是不是已经很近了?回首阅读这些代码,不...
  • nlqlove
  • nlqlove
  • 2012年06月09日 19:58
  • 6237

CYC-爱心暖暖的小动画

一个看着暖暖的心形小动画 简单操作 就能实现 送给另一个她一个小惊喜吧一个UIView 用于布局#import "XinView.h" @implementation XinView - (in...

CSS3 小动画

html+css3制作的一个小动画

小动画演示如何用调整边框快速抠出…

调整边缘抠图是极快的,不过新手对调整面板的设置面板比较陌生,这里作者用小动画的效果演示调整边缘抠图中一些重要参数设置,弄懂后抠图就非常容易。 原图 最终效果 ...

【技术控】 如何做按钮小动画?HTML+CSS3

当在做网站前端的时候,如何利用HTML+CSS3 做按钮小动画,下面的案例大家可以试试,附源代码! 按钮,宽:200,高:45,背景颜色:浅蓝 #b9ccd2 如下图:   当鼠标移动到按钮...
  • ak619
  • ak619
  • 2016年02月25日 14:35
  • 359

H5动画 模拟下雨

  • 2017年01月06日 19:45
  • 86KB
  • 下载

H5动画示例

  • 2016年12月19日 23:00
  • 5.16MB
  • 下载

c#:利用Timer和图片框控件,编写一个图片不断向左移动的小动画

利用Timer和图片框控件,编写一个图片不断向左移动的小动画。所用图片自行提供或设计。 提示:(1)改变图片的Left值,图片向左(右)移动;改变图片的Top值,图片向下(上)左移动;同时改变图片的...

h5微信场景图文动画

  • 2015年08月13日 15:12
  • 4.03MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:转载:值得回味的H5 离子 小动画
举报原因:
原因补充:

(最多只允许输入30个字)