jQuery 动态粒子效果示例代码


Posted in jQuery onJuly 07, 2020

效果图

jQuery 动态粒子效果示例代码

1.js部分

var RENDERER = {
	PARTICLE_COUNT : 1000,
	PARTICLE_RADIUS : 1,
	MAX_ROTATION_ANGLE : Math.PI / 60,
	TRANSLATION_COUNT : 500,
	
	init : function(strategy){
		this.setParameters(strategy);
		this.createParticles();
		this.setupFigure();
		this.reconstructMethod();
		this.bindEvent();
		this.drawFigure();
	},
	setParameters : function(strategy){
		this.$window = $(window);
		
		this.$container = $('#jsi-particle-container');
		this.width = this.$container.width();
		this.height = this.$container.height();
		
		this.$canvas = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container);
		this.context = this.$canvas.get(0).getContext('2d');
		
		this.center = {x : this.width / 2, y : this.height / 2};
		
		this.rotationX = this.MAX_ROTATION_ANGLE;
		this.rotationY = this.MAX_ROTATION_ANGLE;
		this.strategyIndex = 0;
		this.translationCount = 0;
		this.theta = 0;
		
		this.strategies = strategy.getStrategies();
		this.particles = [];
	},
	createParticles : function(){
		for(var i = 0; i < this.PARTICLE_COUNT; i ++){
			this.particles.push(new PARTICLE(this.center));
		}
	},
	reconstructMethod : function(){
		this.setupFigure = this.setupFigure.bind(this);
		this.drawFigure = this.drawFigure.bind(this);
		this.changeAngle = this.changeAngle.bind(this);
	},
	bindEvent : function(){
		this.$container.on('click', this.setupFigure);
		this.$container.on('mousemove', this.changeAngle);
	},
	changeAngle : function(event){
		var offset = this.$container.offset(),
			x = event.clientX - offset.left + this.$window.scrollLeft(),
			y = event.clientY - offset.top + this.$window.scrollTop();
		
		this.rotationX = (this.center.y - y) / this.center.y * this.MAX_ROTATION_ANGLE;
		this.rotationY = (this.center.x - x) / this.center.x * this.MAX_ROTATION_ANGLE;
	},
	setupFigure : function(){
		for(var i = 0, length = this.particles.length; i < length; i++){
			this.particles[i].setAxis(this.strategies[this.strategyIndex]());
		}
		if(++this.strategyIndex == this.strategies.length){
			this.strategyIndex = 0;
		}
		this.translationCount = 0;
	},
	drawFigure : function(){
		requestAnimationFrame(this.drawFigure);
		
		this.context.fillStyle = 'rgba(0, 0, 0, 0.2)';
		this.context.fillRect(0, 0, this.width, this.height);
		
		for(var i = 0, length = this.particles.length; i < length; i++){
			var axis = this.particles[i].getAxis2D(this.theta);
			
			this.context.beginPath();
			this.context.fillStyle = axis.color;
			this.context.arc(axis.x, axis.y, this.PARTICLE_RADIUS, 0, Math.PI * 2, false);
			this.context.fill();
		}
		this.theta++;
		this.theta %= 360;
		
		for(var i = 0, length = this.particles.length; i < length; i++){
			this.particles[i].rotateX(this.rotationX);
			this.particles[i].rotateY(this.rotationY);
		}
		this.translationCount++;
		this.translationCount %= this.TRANSLATION_COUNT;
		
		if(this.translationCount == 0){
			this.setupFigure();
		}
	}
};
var STRATEGY = {
	SCATTER_RADIUS :150,
	CONE_ASPECT_RATIO : 1.5,
	RING_COUNT : 5,
	
	getStrategies : function(){
		var strategies = [];
		
		for(var i in this){
			if(this[i] == arguments.callee || typeof this[i] != 'function'){
				continue;
			}
			strategies.push(this[i].bind(this));
		}
		return strategies;
	},
	createSphere : function(){
		var cosTheta = Math.random() * 2 - 1,
			sinTheta = Math.sqrt(1 - cosTheta * cosTheta),
			phi = Math.random() * 2 * Math.PI;
			
		return {
			x : this.SCATTER_RADIUS * sinTheta * Math.cos(phi),
			y : this.SCATTER_RADIUS * sinTheta * Math.sin(phi),
			z : this.SCATTER_RADIUS * cosTheta,
			hue : Math.round(phi / Math.PI * 30)
		};
	},
	createTorus : function(){
		var theta = Math.random() * Math.PI * 2,
			x = this.SCATTER_RADIUS + this.SCATTER_RADIUS / 6 * Math.cos(theta),
			y = this.SCATTER_RADIUS / 6 * Math.sin(theta),
			phi = Math.random() * Math.PI * 2;
		
		return {
			x : x * Math.cos(phi),
			y : y,
			z : x * Math.sin(phi),
			hue : Math.round(phi / Math.PI * 30)
		};
	},
	createCone : function(){
		var status = Math.random() > 1 / 3,
			x,
			y,
			phi = Math.random() * Math.PI * 2,
			rate = Math.tan(30 / 180 * Math.PI) / this.CONE_ASPECT_RATIO;
		
		if(status){
			y = this.SCATTER_RADIUS * (1 - Math.random() * 2);
			x = (this.SCATTER_RADIUS - y) * rate;
		}else{
			y = -this.SCATTER_RADIUS;
			x = this.SCATTER_RADIUS * 2 * rate * Math.random();
		}
		return {
			x : x * Math.cos(phi),
			y : y,
			z : x * Math.sin(phi),
			hue : Math.round(phi / Math.PI * 30)
		};
	},
	createVase : function(){
		var theta = Math.random() * Math.PI,
			x = Math.abs(this.SCATTER_RADIUS * Math.cos(theta) / 2) + this.SCATTER_RADIUS / 8,
			y = this.SCATTER_RADIUS * Math.cos(theta) * 1.2,
			phi = Math.random() * Math.PI * 2;
		
		return {
			x : x * Math.cos(phi),
			y : y,
			z : x * Math.sin(phi),
			hue : Math.round(phi / Math.PI * 30)
		};
	}
};
var PARTICLE = function(center){
	this.center = center;
	this.init();
};
PARTICLE.prototype = {
	SPRING : 0.01,
	FRICTION : 0.9,
	FOCUS_POSITION : 300,
	COLOR : 'hsl(%hue, 100%, 70%)',
	
	init : function(){
		this.x = 0;
		this.y = 0;
		this.z = 0;
		this.vx = 0;
		this.vy = 0;
		this.vz = 0;
		this.color;
	},
	setAxis : function(axis){
		this.translating = true;
		this.nextX = axis.x;
		this.nextY = axis.y;
		this.nextZ = axis.z;
		this.hue = axis.hue;
	},
	rotateX : function(angle){
		var sin = Math.sin(angle),
			cos = Math.cos(angle),
			nextY = this.nextY * cos - this.nextZ * sin,
			nextZ = this.nextZ * cos + this.nextY * sin,
			y = this.y * cos - this.z * sin,
			z = this.z * cos + this.y * sin;
			
		this.nextY = nextY;
		this.nextZ = nextZ;
		this.y = y;
		this.z = z;
	},
	rotateY : function(angle){
		var sin = Math.sin(angle),
			cos = Math.cos(angle),
			nextX = this.nextX * cos - this.nextZ * sin,
			nextZ = this.nextZ * cos + this.nextX * sin,
			x = this.x * cos - this.z * sin,
			z = this.z * cos + this.x * sin;
			
		this.nextX = nextX;
		this.nextZ = nextZ;
		this.x = x;
		this.z = z;
	},
	rotateZ : function(angle){
		var sin = Math.sin(angle),
			cos = Math.cos(angle),
			nextX = this.nextX * cos - this.nextY * sin,
			nextY = this.nextY * cos + this.nextX * sin,
			x = this.x * cos - this.y * sin,
			y = this.y * cos + this.x * sin;
			
		this.nextX = nextX;
		this.nextY = nextY;
		this.x = x;
		this.y = y;
	},
	getAxis3D : function(){
		this.vx += (this.nextX - this.x) * this.SPRING;
		this.vy += (this.nextY - this.y) * this.SPRING;
		this.vz += (this.nextZ - this.z) * this.SPRING;
		
		this.vx *= this.FRICTION;
		this.vy *= this.FRICTION;
		this.vz *= this.FRICTION;
		
		this.x += this.vx;
		this.y += this.vy;
		this.z += this.vz;
		
		return {x : this.x, y : this.y, z : this.z};
	},
	getAxis2D : function(theta){
		var axis = this.getAxis3D(),
			scale = this.FOCUS_POSITION / (this.FOCUS_POSITION + axis.z);
			
		return {x : this.center.x + axis.x * scale, y : this.center.y - axis.y * scale, color : this.COLOR.replace('%hue', this.hue + theta)};
	}
};
$(function(){
	RENDERER.init(STRATEGY);
});

2.css部分

html,body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}
.container{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background-color: #000000;
}

3.html部分

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<div id="jsi-particle-container" class="container"></div>

以上就是jQuery 动态粒子效果示例代码的详细内容,更多关于jQuery 动态粒子效果的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现简单飞机大战
Jul 05 #jQuery
jQuery实现简单日历效果
Jul 05 #jQuery
jQuery实现飞机大战小游戏
Jul 05 #jQuery
jquery实现上传图片功能
Jun 29 #jQuery
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
You might like
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php中autoload的用法总结
2013/11/08 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
Python的面向对象思想分析
2015/01/14 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Python利用命名空间解析XML文档
2020/08/10 Python
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
机电专业大学生求职信
2013/10/04 职场文书
餐厅总厨求职信
2014/03/04 职场文书
幼儿园老师寄语
2014/04/03 职场文书
妇女干部培训方案
2014/05/12 职场文书
十八大演讲稿
2014/05/22 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
银行实习推荐信
2015/03/27 职场文书
交通事故调解协议书
2015/05/20 职场文书
高二数学教学反思
2016/02/18 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
python tqdm用法及实例详解
2021/06/16 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript