转载:值得回味的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>

回味2016年,拥抱2017年

通过一天的时间终于写完了,自己的文笔有待提高。写这篇总结前,看了几个csdn大神的博客,发现人外有人,自己之前的努力简直就是差很多之很远。   我现在的技术和工资都高于身边朋友的,因为我比他们稍微努力...
  • u012012240
  • u012012240
  • 2017年01月01日 23:08
  • 216

csdn如何转载别人的文章

csdn如何转载别人的文章
  • stonesing
  • stonesing
  • 2016年08月25日 17:07
  • 2087

js——小动画

最近写了个小动画练练手,这是我制作的一个小动画(待改进) mark html: html> demo name="viewport" content="wid...
  • dihuiqin
  • dihuiqin
  • 2016年09月16日 18:53
  • 462

csdn如何转载别人的文章

转载地址:http://blog.csdn.net/jiangping_zhu/article/details/18044109 1、找到要转载的文章,用chrome浏览器打开,右键选择审查元...
  • dlhlSC
  • dlhlSC
  • 2016年08月19日 16:51
  • 5053

csdn如何转载别人的文章

##转载于:http://blog.csdn.net/jiangping_zhu/article/details/18044109 ##作者:包心菜加糯米饭 1、找到要转载的文章,用chrome浏览...
  • mzpmzk
  • mzpmzk
  • 2016年05月24日 10:56
  • 11812

csdn如何转载别人的文章

对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高,有时候看到特别好的博客想转载下载,但是不能一个字一个字的敲了,这时候我们就想快速转载别人的博客,把别人的博客移到自己的空间里面,当然...
  • Bleachswh
  • Bleachswh
  • 2016年12月19日 11:08
  • 1499

如何快速转载CSDN中的博客

前言  对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高,有时候看到特别好的博客想转载下载,但是不能一个字一个字的敲了,这时候我们就想快速转载别人的博客,把别人的博客移到自己的空间里...
  • bolu1234
  • bolu1234
  • 2016年07月09日 15:59
  • 12146

CSDN怎么转载别人的博客

以最新的google为例,来说说我们在阅读csdn遇到别人的好文章转载的办法; 首先,我们找到别人的博客,使用F12审查元素,如下: 找到article_content之后,鼠标右键,按照...
  • ILV_XJ
  • ILV_XJ
  • 2017年05月24日 16:07
  • 250

csdn如何转载博客

1、找到要转载的文章,用chrome浏览器打开,右键选择审查元素 2、在chrome中下方的框里找到对应的内容,html脚本中找到对应的节点,选中节点,网页上被选中内容会被高亮显示,然后右键菜单选中...
  • sddxqlrjxr
  • sddxqlrjxr
  • 2015年11月15日 19:12
  • 2928

H5相关小动画代码(个人笔记)

以下代码均在HBuilder软件下执行: 一、图片的淡入       1、首先需要在html页面建一个的盒子(建议在body标签里建),并放上需要用到这个效果的图片     如:     ...
  • DDZYW
  • DDZYW
  • 2016年05月26日 18:28
  • 256
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:转载:值得回味的H5 离子 小动画
举报原因:
原因补充:

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