分离的圆圈

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var $ = {};

$.PI = Math.PI;
$.TAU = $.PI * 2;

$.rand = function (min, max) {
  return Math.random() * (max - min) + min;
};

var Circle = function () {
  function Circle(opt) {
    _classCallCheck(this, Circle);

this.x = opt.x;
    this.y = opt.y;
    this.r = 0.001;
    this.rTarget = opt.r;
  }

_createClass(Circle, [{
    key: 'step',
    value: function step() {
      this.r += (this.rTarget - this.r) * 0.3;

if (this.r < this.rTarget - 0.0005) {
        $.dirty = true;
      }

if (this.x > $.w - this.r) {
        this.x = $.w - this.r;$.dirty = true;
      }
      if (this.x < this.r) {
        this.x = this.r;$.dirty = true;
      }
      if (this.y > $.h - this.r) {
        this.y = $.h - this.r;$.dirty = true;
      }
      if (this.y < this.r) {
        this.y = this.r;$.dirty = true;
      }
    }
  }, {
    key: 'draw',
    value: function draw() {
      $.ctx.moveTo(this.x, this.y);
      $.ctx.arc(this.x, this.y, this.r, 0, $.TAU);
    }
  }]);

return Circle;
}();

$.init = function () {
  $.c = document.querySelector('canvas');
  $.ctx = $.c.getContext('2d');
  $.tick = 0;
  $.circles = [];
  $.dirty = false;
  $.dirtyRect = {
    t: 255,
    r: 255,
    b: 255,
    l: 0
  };
  $.bindEvents();
  $.reset();
  $.loop();
};

$.reset = function () {
  $.w = window.innerWidth;
  $.h = window.innerHeight;
  $.c.width = $.w * window.devicePixelRatio;
  $.c.height = $.h * window.devicePixelRatio;
  $.c.style.width = $.w + 'px';
  $.c.style.height = $.h + 'px';
  $.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
  $.mx = $.w / 2;
  $.my = $.h / 2;
  $.dirty = true;
};

$.bindEvents = function () {
  window.addEventListener('resize', $.onResize);
  window.addEventListener('mousedown', $.onMousedown);
  window.addEventListener('mouseup', $.onMouseup);
  window.addEventListener('mousemove', $.onMousemove);
};

$.onResize = function () {
  $.reset();
};

$.onMousedown = function () {
  $.md = 1;
};

$.onMouseup = function () {
  $.md = 0;
};

$.onMousemove = function (e) {
  $.mx = e.pageX;
  $.my = e.pageY;
};

$.step = function () {
  if ($.md || $.tick < 20) {
    for (var i = 0; i < 2; i++) {
      $.circles.push(new Circle({
        x: $.mx,
        y: $.my,
        r: $.rand(2, 15)
      }));
    }
  }

$.dirtyRect.t = Infinity;
  $.dirtyRect.r = -Infinity;
  $.dirtyRect.b = -Infinity;
  $.dirtyRect.l = Infinity;

for (var _i = 0, l = $.circles.length; _i < l; _i++) {
    var c1 = $.circles[_i];
    for (var j = _i + 1; j < l; j++) {
      var c2 = $.circles[j];
      var dx = c1.x - c2.x;
      var dy = c1.y - c2.y;
      var dist = dx * dx + dy * dy - 50;
      var radii = (c1.r + c2.r) * (c1.r + c2.r);
      if (dist < radii - 2) {
        $.dirty = true;
        var angle = Math.atan2(dy, dx) + $.rand(-0.1, 0.1);
        var diff = (radii - dist) / 10;
        var x = Math.cos(angle) * diff * 0.125;
        var y = Math.sin(angle) * diff * 0.125;
        c1.x += x;
        c1.y += y;
        c2.x -= x;
        c2.y -= y;
      }
    }

$.dirtyRect.t = Math.min($.dirtyRect.t, c1.y - c1.r);
    $.dirtyRect.r = Math.max($.dirtyRect.r, c1.x + c1.r);
    $.dirtyRect.b = Math.max($.dirtyRect.b, c1.y + c1.r);
    $.dirtyRect.l = Math.min($.dirtyRect.l, c1.x - c1.r);

c1.step();
  }

$.tick++;
};

$.draw = function () {
  if ($.dirty) {
    $.ctx.clearRect($.dirtyRect.l, $.dirtyRect.t, $.dirtyRect.r - $.dirtyRect.l, $.dirtyRect.b - $.dirtyRect.t);
    $.ctx.beginPath();
    $.circles.forEach(function (c) {
      return c.draw();
    });
    $.ctx.fillStyle = '#fff';
    $.ctx.fill();
    $.dirty = false;
  }
};

$.loop = function () {
  requestAnimationFrame($.loop);
  $.step();
  $.draw();
};

$.init();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg