laro实现三维粒子聚集成文字动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：laro实现三维粒子聚集成文字动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>

<html class="translated-ltr">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title></title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<style>

    html {overflow:hidden}

    body {position: absolute; margin:0; padding:0;width:100%; height:100%; background: #fefbe8}

    canvas {display:block}

</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/laro.fsm.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/JCanvas.0.1.js"></script>
</head>



<body>



<canvas id="canvas" width="100%" height="100%"></canvas>

<img id="youtext" style="display:none" crossorigin="anonymous" src="//repo.bfw.wiki/bfwrepo/images/app/youtext.png" />

<img id="designIco" style="display:none" crossorigin="anonymous"  src="//repo.bfw.wiki/bfwrepo/images/app/designIco.png" />

<img id="h5ico" style="display:none" crossorigin="anonymous"  src="//repo.bfw.wiki/bfwrepo/images/app/h5ico.png" />

<img id="cs3" style="display:none" crossorigin="anonymous"  src="//repo.bfw.wiki/bfwrepo/images/app/cs3.png" />

<script >
    Laro.register('JxHome', function (La) {
	var pkg = this;
	var bugBalls;
	this.initStage = function () {
		var canvas = document.getElementById('canvas');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		
		this.canvas = canvas;
		this.stage = new CVS.$stage(canvas);
		this.ctx = this.stage.ctx;
		this.vpx = canvas.width/2;
		this.vpy = canvas.height/2;
		this.normalN = 100;
		this.normalBalls = [];
		this.angleX = 0.001;
		this.angleY = 0.001;
		
		this.zstep = 1;
		this.zflag = 1;
	}
	
	this.range = function (a, b) 
	{
        return Math.floor(Math.random()*(b-a) + a);
    }
	
	this.tween = function (ball, t) 
	{
		if (!ball.end) 
		{
			var _x = ball.xpos, _y = ball.ypos, _z = ball.zpos;
			var _t = (+new Date) - ball.startAnimTime;
			ball.xpos = ball.f_xpos + (ball.t_xpos - ball.f_xpos)*Math.sin(Math.PI*_t/(2*t));
			ball.ypos = ball.f_ypos + (ball.t_ypos - ball.f_ypos)*Math.sin(Math.PI*_t/(2*t));
			ball.zpos = ball.f_zpos + (ball.t_zpos - ball.f_zpos)*Math.sin(Math.PI*_t/(2*t));
			
			if (_t >= t) 
			{
				ball.end = true;
			}
		}
	}
	
	this.addNormalBalls = function (n) 
	{
		var vpx = this.vpx, vpy = this.vpy, range = this.range, stage = this.stage,
			_this = this;
		if (n) {
			this.normalN = n;
		}
		for (var i=0; i< this.normalN; i++) {

			var ball = CVS.createPoint3D(this.stage.ctx, function () {
                var color = 'rgb('+range(200, 255)+', '+range(40, 255)+', '+range(80, 180)+')';

				this.xpos = range(-vpx, vpx);
				this.ypos = range(-vpy, vpy);
				this.zpos = range(-vpx, vpx);

				this.width = range(8, 15);
				this.w = this.width;
				this.draw = function () {
					this.ctx.beginPath();
					this.ctx.arc(0, 0, this.width/2, 0, Math.PI*2, true);
					this.ctx.closePath();
                    this.ctx.fillStyle = color;
					this.ctx.fill();
				}
			});
			ball.type = 'normal';
			ball.setVanishPoint(vpx, vpy);
			ball.setCenterPoint(0, 0, 0);
			stage.addChild(ball);
			this.normalBalls.push(ball);
		}
	}
	
	this.updateBalls = function (dt, name) 
	{
		var balls = this.particleHash[name];
		this._updateBalls(dt,balls);
	};
	
	this._updateBalls = function (dt,balls) 
	{
		for (var i = 0; i < balls.length; i ++) {
			var ball = balls[i];
			
			ball.zpos += JxHome.zstep;

			ball.rotateX(this.angleX);
			ball.rotateY(this.angleY);
			var scale = ball.getScale(),
			pos = ball.getScreenXY();
			ball.width = Math.max(10*scale, 2);
			ball.x = pos.x;
			ball.y = pos.y;
		}
	};

	this.pushBalls = function (name) 
	{
		var balls = this.particleHash[name];
		for (var i = 0; i < balls.length; i ++) {
			var ball = balls[i];
			JxHome.stage.addChild(ball);
			ball.end = false;
			ball.width = ball.logoPos.width;
			ball.color = 'rgb('+ball.logoPos.r+', '+ball.logoPos.g+', '+ball.logoPos.b+')';
			ball.startAnimTime = (+ new Date);
			
		}
	}
	
	this.bindStage = function () {
		var _this = this;
		this.stage.addEventListener('mousemove', function (x, y) {
			_this.angleY = (x - _this.vpx) * .00001;
            _this.angleX = (y - _this.vpy) * .00001;
		});
	}
	
	this.initParticles = function () 
	{
		this.qqParticles = this.getParticles('youtext',47,11);
		this.jxParticles = this.getParticles('designIco',29,5);
		this.qplusParticles = this.getParticles('h5ico',28,5);
		this.atParticles = this.getParticles('cs3',21,5);
		
		this.particleHash = 
		{
			'normal': this.normalBalls,
			'youtext': this.qqParticles,
			'designIco': this.jxParticles,
			'h5ico': this.qplusParticles,
			'cs3': this.atParticles
		}
	}
	
	this.getParticles = function (id, w, h, z) 
	{
		if (z == undefined) { z = 0; }
		//
		var image = document.getElementById(id);
		//
		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
		
		this.ctx.drawImage(image, 0, 0, w, h, Math.round(this.canvas.width/2-w/2), Math.round(this.canvas.height/2-h/2), w, h);
		
		var imageData = this.ctx.getImageData(Math.round(this.canvas.width/2-w/2), Math.round(this.canvas.height/2-h/2), w, h);
		//
		////////////////////////
		var ret = [];
		for (var x = 0; x < imageData.width; x++) 
		{
			for (var y = 0; y < imageData.height; y++) 
			{
				var i = 4*(y * imageData.width + x);
                if (imageData.data[i + 3] > 128) 
				{
					//------------------------
					var r = imageData.data[i],
						g = imageData.data[i + 1],
						b = imageData.data[i + 2];
					ret.push(new JxHome.Particle(this.stage, this.canvas, id, w, h, x, y, z, r, g, b));
				}
			}
		}
		return ret;
	}
	
	this.init = function () 
	{
		this.initStage();
		this.bindStage();
		this.initParticles();
		
		JxHome.$fsm.init();
		JxHome.$loop.init();
	}
});

Laro.register('JxHome', function (La) {
	var pkg = this,
		range = JxHome.range,
		vpx = JxHome.vpx,
		vpy = JxHome.vpy;
	
	this.Particle = function (stage, canvas, id, w, h, x, y, z, r, g, b) {
		this.canvas = canvas;
		
		var vpx = canvas.width/2,
			vpy = canvas.height/2;

		var ball =  CVS.createPoint3D(stage.ctx, function () 
		{
			var color = 'rgb('+ range(200, 255) +', '+ range(200, 255) +', '+ range(200, 255) +')';
			var a = Math.PI * 2 * Math.random();
            var b = Math.PI * 2 * Math.random();
			var r = range(vpx, vpy);

				this.xpos = Math.sin(a) * Math.sin(b) * r;
				this.ypos = Math.cos(a) * Math.sin(b) * r;
				this.zpos = -Math.abs(Math.cos(b) * r);
				
				this.width = range(3, 15);
				this.color = color;
				this.draw = function () 
				{
					this.ctx.beginPath();
					this.ctx.arc(0, 0, this.width/2, 0, Math.PI*2, true);
					this.ctx.closePath();
                    this.ctx.fillStyle = this.color;
					this.ctx.fill();
				}
		});

		ball.logoPos = 
		{//影响粒子密度
			x: (x-w/2)*11,
			y: (y-h/2)*11,
			z: Math.round((1100-this.canvas.width)/5),
			width: 10,
			r: r,
			g: g,
			b: b
		};
		
		ball.f_xpos = ball.xpos;
		ball.f_ypos = ball.ypos;
		ball.f_zpos = ball.zpos;
		ball.t_xpos = ball.logoPos.x;
		ball.t_ypos = ball.logoPos.y;
		ball.t_zpos = ball.logoPos.z;
		
		ball.startAnimTime = (+new Date);
		ball.end = true;
		ball.type = id;
		
		ball.setVanishPoint(canvas.width/2, canvas.height/2);
		ball.setCenterPoint(0, 0, z);
		
		ball.moveX = 1 - Math.random()*2;
		return ball;
	}
});

Laro.register('JxHome.$states', function (La) {
	var pkg = this;
	
	this.No = La.BaseState.extend(function () {
	
	}).methods({
		enter: function (msg, fromState)
		{
			this._t = 0;
			JxHome.addNormalBalls();
		},
		leave: function () 
		{
			
		},
		update: function (dt) {
			this._t += dt;
			JxHome.updateBalls(dt, 'normal');
		},
		transition: function () { 
			if (this._t > 2) { 
				this.host.setState(1);
			} 
		},
		draw: function () {
			
		}
	});
	
	this.QQ = La.BaseState.extend(function () {
	
	}).methods({
		enter: function (msg, fromState) 
		{
			this.push = false;
			this._t = 0;
			this.explosion = false;
		},
		leave: function () 
		{
			for (var i = 0; i < JxHome.stage.children.length; i++) 
			{
				var ball = JxHome.stage.children[i];
				//ball.type == 'cs3' 在循环时清除最后一组粒子，非常重要!!!!
				if (ball.type == 'normal' || ball.type == 'cs3' ) 
				{
					JxHome.stage.children.splice(i, 1);
					i --;
				}
			}
		},
.........完整代码请登录后点击上方下载按钮下载查看