html5 canvas黑洞粒子吸引动画特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

13 50 17



特效描述:黑洞粒子 吸引动画。基于canvas绘制宇宙黑洞旋涡粒子动画特效。跟随鼠标移动悬停效果。

代码结构

1. HTML代码

<script>
"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);</script>



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


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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