基于canvas酷炫3D拖动圆点动画特效



81 321 108



特效描述:基于canvas 酷炫3D拖动圆点 动画特效,html5基于canvas制作酷炫拖动的3D圆点粒子背景动画特效

代码结构

1. HTML代码

		<canvas id="canvas" width="1349" height="404"></canvas>
		<script type="text/javascript">
			//测试 路径属性
			var o = document.getElementsByTagName("body")[0];
			var num = 200;
			var w = window.innerWidth;
			var h = o.offsetHeight;
			var max = 100;
			var _x = 0;
			var _y = 0;
			var _z = 150;
			var dtr = function(d) {
			  return d * Math.PI / 180;
			};
			var rnd = function() {
			  return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
			};
			var dist = function(p1, p2, p3) {
			  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
			};
			var cam = {
			  obj: {
			    x: _x,
			    y: _y,
			    z: _z
			  },
			  dest: {
			    x: 0,
			    y: 0,
			    z: 1
			  },
			  dist: {
			    x: 0,
			    y: 0,
			    z: 200
			  },
			  ang: {
			    cplane: 0,
			    splane: 0,
			    ctheta: 0,
			    stheta: 0
			  },
			  zoom: 1,
			  disp: {
			    x: w / 2,
			    y: h / 2,
			    z: 0
			  },
			  upd: function() {
			    cam.dist.x = cam.dest.x - cam.obj.x;
			    cam.dist.y = cam.dest.y - cam.obj.y;
			    cam.dist.z = cam.dest.z - cam.obj.z;
			    cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
			    cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
			    cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
			    cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
			  }
			};
			var trans = {
			  parts: {
			    sz: function(p, sz) {
			      return {
			        x: p.x * sz.x,
			        y: p.y * sz.y,
			        z: p.z * sz.z
			      };
			    },
			    rot: {
			      x: function(p, rot) {
			        return {
			          x: p.x,
			          y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
			          z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
			        };
			      },
			      y: function(p, rot) {
			        return {
			          x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
			          y: p.y,
			          z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
			        };
			      },
			      z: function(p, rot) {
			        return {
			          x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
			          y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
			          z: p.z
			        };
			      }
			    },
			    pos: function(p, pos) {
			      return {
			        x: p.x + pos.x,
			        y: p.y + pos.y,
			        z: p.z + pos.z
			      };
			    }
			  },
			  pov: {
			    plane: function(p) {
			      return {
			        x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
			        y: p.y,
			        z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
			      };
			    },
			    theta: function(p) {
			      return {
			        x: p.x,
			        y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
			        z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
			      };
			    },
			    set: function(p) {
			      return {
			        x: p.x - cam.obj.x,
			        y: p.y - cam.obj.y,
			        z: p.z - cam.obj.z
			      };
			    }
			  },
			  persp: function(p) {
			    return {
			      x: p.x * cam.dist.z / p.z * cam.zoom,
			      y: p.y * cam.dist.z / p.z * cam.zoom,
			      z: p.z * cam.zoom,
			      p: cam.dist.z / p.z
			    };
			  },
			  disp: function(p, disp) {
			    return {
			      x: p.x + disp.x,
			      y: -p.y + disp.y,
			      z: p.z + disp.z,
			      p: p.p
			    };
			  },
			  steps: function(_obj_, sz, rot, pos, disp) {
			    var _args = trans.parts.sz(_obj_, sz);
			    _args = trans.parts.rot.x(_args, rot);
			    _args = trans.parts.rot.y(_args, rot);
			    _args = trans.parts.rot.z(_args, rot);
			    _args = trans.parts.pos(_args, pos);
			    _args = trans.pov.plane(_args);
			    _args = trans.pov.theta(_args);
			    _args = trans.pov.set(_args);
			    _args = trans.persp(_args);
			    _args = trans.disp(_args, disp);
			    return _args;
			  }
			};
			(function() {
			  "use strict";
			  var threeD = function(param) {
			    this.transIn = {};
			    this.transOut = {};
			    this.transIn.vtx = (param.vtx);
			    this.transIn.sz = (param.sz);
			    this.transIn.rot = (param.rot);
			    this.transIn.pos = (param.pos);
			  };
			  threeD.prototype.vupd = function() {
			    this.transOut = trans.steps(
			      this.transIn.vtx,
			      this.transIn.sz,
			      this.transIn.rot,
			      this.transIn.pos,
			      cam.disp
			    );
			  };
			  var Build = function() {
			    this.vel = 0.04;
			    this.lim = 360;
			    this.diff = 200;
			    this.initPos = 100;
			    this.toX = _x;
			    this.toY = _y;
			    this.go();
			  };
			  Build.prototype.go = function() {
			    this.canvas = document.getElementById("canvas");
			    this.canvas.width = window.innerWidth;
			    this.canvas.height = o.offsetHeight;
			    this.$ = canvas.getContext("2d");
			    this.$.globalCompositeOperation = 'source-over';
			    this.varr = [];
			    this.dist = [];
			    this.calc = [];
			    for (var i = 0, len = num; i < len; i++) {
			      this.add();
			    }
			    this.rotObj = {
			      x: 0,
			      y: 0,
			      z: 0
			    };
			    this.objSz = {
			      x: w / 5,
			      y: h / 5,
			      z: w / 5
			    };
			  };
			  Build.prototype.add = function() {
			    this.varr.push(new threeD({
			      vtx: {
			        x: rnd(),
			        y: rnd(),
			        z: rnd()
			      },
			      sz: {
			        x: 0,
			        y: 0,
			        z: 0
			      },
			      rot: {
			        x: 20,
			        y: -20,
			        z: 0
			      },
			      pos: {
			        x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
			        y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
			        z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
			      }
			    }));
			    this.calc.push({
			      x: 360 * Math.random(),
			      y: 360 * Math.random(),
			      z: 360 * Math.random()
			    });
			  };
			  Build.prototype.upd = function() {
			    cam.obj.x += (this.toX - cam.obj.x) * 0.05;
			    cam.obj.y += (this.toY - cam.obj.y) * 0.05;
			  };
			  Build.prototype.draw = function() {
			    this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
			    cam.upd();
			    this.rotObj.x += 0.1;
			    this.rotObj.y += 0.1;
			    this.rotObj.z += 0.1;
			    for (var i = 0; i < this.varr.length; i++) {
			      for (var val in this.calc[i]) {
			        if (this.calc[i].hasOwnProperty(val)) {
			          this.calc[i][val] += this.vel;
			          if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
			        }
			      }
			      this.varr[i].transIn.pos = {
			        x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
			        y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
			        z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
			      };
			      this.varr[i].transIn.rot = this.rotObj;
			      this.varr[i].transIn.sz = this.objSz;
			      this.varr[i].vupd();
			      if (this.varr[i].transOut.p < 0) continue;
			      var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
			      this.$.globalCompositeOperation = 'lighter';
			      g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
			      g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
			      g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
			      this.$.fillStyle = g;
			      this.$.beginPath();
			      this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
			      this.$.fill();
			      this.$.closePath();
			    }
			  };
			  Build.prototype.anim = function() {
			    window.requestAnimationFrame = (function() {
			      return window.requestAnimationFrame ||
			        function(callback, element) {
			          window.setTimeout(callback, 1000 / 60);
			        };
			    })();
			    var anim = function() {
			      this.upd();
			      this.draw();
			      window.requestAnimationFrame(anim);
			    }.bind(this);
			    window.requestAnimationFrame(anim);
			  };
			  Build.prototype.run = function() {
			    this.anim();
			    window.addEventListener('mousemove', function(e) {
			      this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
			      this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
			    }.bind(this));
			    window.addEventListener('touchmove', function(e) {
			      e.preventDefault();
			      this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
			      this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
			    }.bind(this));
			    window.addEventListener('mousedown', function(e) {
			      for (var i = 0; i < 100; i++) {
			        this.add();
			      }
			    }.bind(this));
			    window.addEventListener('touchstart', function(e) {
			      e.preventDefault();
			      for (var i = 0; i < 100; i++) {
			        this.add();
			      }
			    }.bind(this));
			  };
			  var app = new Build();
			  app.run();
			})();
			window.addEventListener('resize', function() {
			  canvas.width = w = window.innerWidth;
			  canvas.height = h = window.innerHeight;
			}, false);
		</script>	



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 拖动 拖拽 拖动插件 拖拽插件 全屏焦点图 滑动星星打分 h5弹窗动画 html5弹窗动画 旋转翻转 旋转 翻转 全屏切换 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 其他 h5按钮动画 html5按钮动画 图片拖动 图片拖拽 图片翻转 图片旋转 图片全屏 h5图片动画 h5图标动画 html5图片动画 html5图标动画 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到