粒子动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const PI = Math.PI,
      TWO_PI = Math.PI * 2;

Util = {};
Util.timeStamp = function() {
	return window.performance.now();
};
Util.random = function(min, max) {
  return min + Math.random() * (max - min);
};
Util.map = function(a, b, c, d, e) {
  return (a - b) / (c - b) * (e - d) + d;
};
Util.lerp = function(value1, value2, amount) {
  return value1 + (value2 - value1) * amount;
};
Util.array2D = function(tableau, array_width){
	var result = [];
	for (var i = 0; i < tableau.length; i += array_width) result.push(tableau.slice(i, i + array_width));
	return result;
};
Util.threeAngle = function(p0,p1,p2){
    var b = Math.pow(p1.x-p0.x,2) + Math.pow(p1.y-p0.y,2),
        a = Math.pow(p1.x-p2.x,2) + Math.pow(p1.y-p2.y,2),
        c = Math.pow(p2.x-p0.x,2) + Math.pow(p2.y-p0.y,2);
    return Math.acos( (a+b-c) / Math.sqrt(4*a*b) );
}

Tween = {};
Tween.linear = function(currentTime, start, degreeOfChange, duration) {
  return degreeOfChange * currentTime / duration + start;
};
Tween.easeInOutQuad = function(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * t * t + b;
  t--;
  return -c / 2 * (t * (t - 2) - 1) + b;
};
Tween.easeInOutExpo = function(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
  t--;
  return c / 2 * (-Math.pow(2, -10 * t) + 2) + b;
};

class Vector{
	constructor(x,y){
		this.x = x || 0;
		this.y = y || 0;
	}
	set(x,y){
		this.x = x;
		this.y = y;
	}
  reset(){
		this.x = 0;
		this.y = 0;
  }
	fromAngle(angle){
		let x = Math.cos(angle),
			y = Math.sin(angle);
		return new Vector(x,y);
	}
	add(vector){
		this.x += vector.x;
		this.y += vector.y;
	}
	sub(vector){
		this.x -= vector.x;
		this.y -= vector.y;
	}
	mult(scalar){
		this.x *= scalar;
		this.y *= scalar;
	}
	div(scalar){
		this.x /= scalar;
		this.y /= scalar;
	}
	dot(vector){
		return vector.x * this.x + vector.y * this.y;
	}
	limit(limit_value){
		if(this.mag() > limit_value) this.setMag(limit_value);
	}
	mag(){
		return Math.hypot(this.x,this.y);
	}
	setMag(new_mag){
		if(this.mag() > 0){
			this.normalize();
		}else{
			this.x = 1;
			this.y = 0;
		}
		this.mult(new_mag);
	}
	normalize(){
		let mag = this.mag();
		if(mag > 0){
			this.x /= mag;
			this.y /= mag;
		}
	}
	heading(){
		return Math.atan2(this.x,this.y);
	}
	setHeading(angle){
		let mag = this.mag();
		this.x = Math.cos(angle) * mag;
		this.y = Math.sin(angle) * mag;
	}
	dist(vector){
		return new Vector(this.x - vector.x,this.y - vector.y).mag();
	}
	angle(vector){
		return Math.atan2(vector.y - this.y, vector.x - this.x);
	}	
	copy(){
		return new Vector(this.x,this.y);
	}
}

// init canvas
let canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d"),
  H = (canvas.height = 600),
  W = (canvas.width = 600);
document.body.appendChild(canvas);

//document.body.addEventListener("mousemove", event => mousemove(event), false);
let cursor = new Vector(W/2,H/2);
function mousemove(event) {
  cursor.x = event.pageX - canvas.offsetLeft;
  cursor.y = event.pageY - canvas.offsetTop;
}

class Point {
  constructor(x, y) {
    this.position = new Vector(x, y);
    this.acceleration = new Vector(0, 0).fromAngle(Util.random(0,TWO_PI));
    this.velocity = new Vector(0, 0);
    this.radius = Util.random(6,30);
    this.zone = this.radius + 40;
    this.c = Util.random(0,360);
    this.min_radius = 0.2;
    this.max_radius = this.radius;
  }
  display() {
    let color = "hsl("+ Util.map(this.velocity.mag(), 2, 0, 0, 360)+",70%,"+Util.map(this.radius, this.min_radius, this.max_radius, 100, 20)+"%)";
    ctx.globalAlpha = Util.map(this.radius, this.min_radius, this.max_radius, 1, 0);
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI);
    ctx.fill();
  }
  integrate() {
    let force  = new Vector(0,0).fromAngle(this.position.angle(cursor));
    force.setMag(0.1);
    this.addForce(force);
    
    this.radius = Util.map(this.velocity.mag(), 0, 2, this.min_radius, this.max_radius);
    this.velocity.add(this.acceleration);
    //this.velocity.mult(0.98);
    this.velocity.limit(2);
    this.position.add(this.velocity);
    this.acceleration.reset();
  }
  addForce(force) {
    this.acceleration.add(force);
  }
  detection(others) {
    for (let i = 0; i < others.length; i++) {
      let other = others[i];
      if (this === other) continue;
      let dist = this.position.dist(other.position),
        max_dist = this.zone + other.radius;
      if ( max_dist - dist >= 0) {
        let angle = other.position.angle(this.position);
        let force = new Vector().fromAngle(angle);
        force.setMag(Util.map(dist, 0, max_dist, 0.2, 0));
        this.addForce(force);
      }
    }
  }
  bound() {
    let dist = this.position.dist(cursor);
    if (dist > W/3) {
      let force = new Vector(0,0).fromAngle(this.position.angle(cursor));
      force.setMag(Util.map(dist,0,W/3,0,0.02));
      this.addForce(force);
    }
  }
}

let points = [];

for (let i = 0; i < 80; i++) {
  points.push(new Point(cursor.x,cursor.y));
}

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