黑洞: 事件视界

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";var _slicedToArray = function () {function sliceIterator(arr, i) {var _arr = [];var _n = true;var _d = false;var _e = undefined;try {for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {_arr.push(_s.value);if (i && _arr.length === i) break;}} catch (err) {_d = true;_e = err;} finally {try {if (!_n && _i["return"]) _i["return"]();} finally {if (_d) throw _e;}}return _arr;}return function (arr, i) {if (Array.isArray(arr)) {return arr;} else if (Symbol.iterator in Object(arr)) {return sliceIterator(arr, i);} else {throw new TypeError("Invalid attempt to destructure non-iterable instance");}};}();var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _toConsumableArray(arr) {if (Array.isArray(arr)) {for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {arr2[i] = arr[i];}return arr2;} else {return Array.from(arr);}}function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var

PI = Math.PI,cos = Math.cos,sin = Math.sin,abs = Math.abs,sqrt = Math.sqrt,pow = Math.pow,floor = Math.floor,round = Math.round,random = Math.random,atan2 = Math.atan2;
var HALF_PI = 0.5 * PI;
var TAU = 2 * PI;
var rand = function rand(n) {return n * random();};
var randIn = function randIn(min, max) {return rand(max - min) + min;};
var fadeOut = function fadeOut(t, m) {return (m - t) / m;};
var fadeInOut = function fadeInOut(t, m) {
	var hm = 0.5 * m;
	return abs((t + hm) % m - hm) / hm;
};
var dist = function dist(x1, y1, x2, y2) {return sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2));};
var angle = function angle(x1, y1, x2, y2) {return atan2(y2 - y1, x2 - x1);};
var lerp = function lerp(n1, n2, speed) {return (1 - speed) * n1 + speed * n2;};

var particleCount = 1000;
var eventHorizon = 40;

var canvas = void 0;
var ctx = void 0;
var center = void 0;
var particles = void 0;
var mouse = void 0;
var hover = void 0;

Array.prototype.lerp = function (target, speed) {var _this = this;
	this.forEach(function (n, i) {return _this[i] = lerp(n, target[i], speed);});
};var

Particle = function () {
	function Particle() {_classCallCheck(this, Particle);
		this.init();
	}_createClass(Particle, [{ key: "init", value: function init()

{
			this.life = 0;
			this.ttl = randIn(50, 200);
			this.speed = randIn(3, 5);
			this.size = randIn(0.5, 2);
			this.position = [rand(canvas.a.width), rand(canvas.a.height)];
			this.lastPosition = [].concat(_toConsumableArray(this.position));
			this.direction = angle.apply(undefined, _toConsumableArray(this.position).concat(_toConsumableArray(center))) - HALF_PI;
			this.velocity = [
			cos(this.direction) * this.speed,
			sin(this.direction) * this.speed];

this.hue = rand(360);
			this.reset = false;
		} }, { key: "die", value: function die()
		{var _ctx$a;
			ctx.a.save();
			ctx.a.globalAlpha = 0.1;
			ctx.a.filter = "blur(4px)";
			ctx.a.globalCompositeOperation = 'multiply';
			ctx.a.lineWidth = 2;
			ctx.a.strokeStyle = this.color;
			ctx.a.beginPath();
			(_ctx$a = ctx.a).arc.apply(_ctx$a, _toConsumableArray(center).concat([eventHorizon, 0, TAU]));
			ctx.a.closePath();
			ctx.a.stroke();
			ctx.a.restore();

this.init();
		} }, { key: "checkBounds", value: function checkBounds()
		{var _lastPosition = _slicedToArray(
			this.lastPosition, 2),x = _lastPosition[0],y = _lastPosition[1];

return x > canvas.a.width || x < 0 || y > canvas.a.height || y < 0;
		} }, { key: "update", value: function update()
		{
			this.lastPosition = [].concat(_toConsumableArray(this.position));
			this.direction = lerp(
			angle.apply(undefined, _toConsumableArray(this.lastPosition).concat(_toConsumableArray(center))),
			angle.apply(undefined, _toConsumableArray(this.position).concat(_toConsumableArray(center))),
			0.01);

this.speed = fadeOut(dist.apply(undefined, _toConsumableArray(this.position).concat(_toConsumableArray(center))), canvas.a.width) * 50;
			this.velocity.lerp(
			[cos(this.direction) * this.speed, sin(this.direction) * this.speed],
			0.01);

this.position[0] += this.velocity[0];
			this.position[1] += this.velocity[1];

(this.checkBounds() || this.life++ > this.ttl) && this.init();
			dist.apply(undefined, _toConsumableArray(this.position).concat(_toConsumableArray(center))) <= eventHorizon && this.die();

return this;
		} }, { key: "draw", value: function draw()
		{var _ctx$a2, _ctx$a3;
			ctx.a.save();
			ctx.a.lineWidth = this.size;
			ctx.a.strokeStyle = this.color;
			ctx.a.beginPath();
			(_ctx$a2 = ctx.a).moveTo.apply(_ctx$a2, _toConsumableArray(this.lastPosition));
			(_ctx$a3 = ctx.a).lineTo.apply(_ctx$a3, _toConsumableArray(this.position));
			ctx.a.stroke();
			ctx.a.closePath();
			ctx.a.restore();

return this;
		} }, { key: "color", get: function get() {return "hsla(" + this.hue + ", 50%, 80%, " + fadeInOut(this.life, this.ttl) + ")";} }]);return Particle;}();

function setup() {
	createCanvas();
	resize();
	createParticles();
	draw();
}

function createCanvas() {
	canvas = {
		a: document.createElement("canvas"),
		b: document.createElement("canvas") };

canvas.b.style = "\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t";

document.body.appendChild(canvas.b);
	ctx = {
		a: canvas.a.getContext("2d"),
		b: canvas.b.getContext("2d") };

center = [0, 0];
	mouse = [0, 0];
	hover = false;
}

function createParticles() {
	particles = [];

var i = void 0;

for (i = 0; i < particleCount; i++) {
		particles.push(new Particle());
	}
}

function resize() {var _window =
	window,innerWidth = _window.innerWidth,innerHeight = _window.innerHeight;

canvas.a.width = canvas.b.width = innerWidth;
	canvas.a.height = canvas.b.height = innerHeight;

center[0] = 0.5 * innerWidth;
	center[1] = 0.5 * innerHeight;
}

function mouseHandler(e) {var
	type = e.type,clientX = e.clientX,clientY = e.clientY;

hover = type === "mousemove";

mouse[0] = clientX;
	mouse[1] = clientY;
}

function renderToScreen() {
	ctx.b.save();
	ctx.b.filter = "blur(5px) saturate(200%) contrast(200%)";
	ctx.b.drawImage(canvas.a, 0, 0);
	ctx.b.restore();

ctx.b.save();
	ctx.b.globalCompositeOperation = "lighter";
	ctx.b.drawImage(canvas.a, 0, 0);
	ctx.b.restore();
}

function draw() {var _ctx$a4;
	ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);

ctx.a.save();
	ctx.a.beginPath();
	ctx.a.filter = "blur(2px)";
	ctx.a.fillStyle = "rgba(0,0,0,0.1)";
	(_ctx$a4 = ctx.a).arc.apply(_ctx$a4, _toConsumableArray(center).concat([eventHorizon, 0, TAU]));
	ctx.a.fill();
	ctx.a.closePath();
	ctx.a.restore();

ctx.b.fillStyle = "rgba(0,0,0,0.5)";
	ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);

center.lerp(hover ? mouse : [0.5 * canvas.a.width, 0.5 * canvas.a.height], 0.05);

var i = void 0;

for (i = 0; i < particleCount; i++) {
		particles[i].draw().update();
	}

renderToScreen();

window.requestAnimationFrame(draw);
}

window.addEventListener("load", setup);
window.addEventListener("resize", resize);
window.addEventListener("mousemove", mouseHandler);
window.addEventListener("mouseout", mouseHandler);

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