Flash/Flex学习笔记(24):粒子效果

简介: 粒子爆炸: 仍然要用到以前的小球类,不过稍加改造 package { import flash.display.Sprite; //小球 类 public class Ball extends Sprite { public var radius:uint;//半径 ...

粒子爆炸

仍然要用到以前的小球类,不过稍加改造

package {
	import flash.display.Sprite;

	//小球 类
	public class Ball extends Sprite {

		public var radius:uint;//半径
		public var color:uint;//颜色
		public var vx:Number=0;//x轴速度
		public var vy:Number=0;//y轴速度

		public function Ball(r:Number=50,c:uint=0xff0000) {
			this.radius=r;
			this.color=c;
			init();
		}

		private function init():void {
			graphics.beginFill(color);
			graphics.drawCircle(0,0,radius);
			graphics.endFill();
		}
	}
}

增加了x,y轴的速度,其它没变

原理:在舞台的某一区域放置大量小球实例,然后在某个时刻让其向四面八方运动即可(即改变每个小球在x,y轴上的坐标)

问题:效率!让CPU在每帧对于大量对象进行重绘是很耗资源的,所以当小球跑出舞台边界时,得想办法通知CPU:这些小球不需要再处理了(反正也看不见)!否则纯属折腾CPU,下面的代码用一个数组存放所有对象实例的引用,然后在EnterFrame事件中不断检测,一旦有对象跑出边界了,就将其清除,不再理会了.

import fl.controls.Label;
import flash.text.TextFieldAutoSize;

stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;

var Count:Number=1500;
var Radius:uint=30;
var CenterX:uint=stage.stageWidth/2;
var CenterY:uint=stage.stageHeight/2;

var ArrBall:Array=new Array(Count);

//让小球呈圆形随机分布
for (var i=0; i<ArrBall.length; i++) {
	ArrBall[i]=new Ball(Math.random() * 5,Math.random() * 0xff0000);
	var angle:Number=Math.random()*Math.PI*2;
	var RadiusRnd:Number=Math.random()*Radius;
	ArrBall[i].x=CenterX+Math.cos(angle)*RadiusRnd;
	ArrBall[i].y=CenterY+Math.sin(angle)*RadiusRnd;
	addChild(ArrBall[i]);
}

var lbl1:Label = new Label();
lbl1.text="点击鼠标引爆这个球";
lbl1.autoSize=TextFieldAutoSize.CENTER;

lbl1.x=stage.stageWidth/2-lbl1.width/2;
lbl1.y=50;
Mouse.cursor=MouseCursor.BUTTON;
addChild(lbl1);

stage.addEventListener(MouseEvent.MOUSE_MOVE,MouseMoveHandler);
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);

//文件鼠标跟随
function MouseMoveHandler(e:MouseEvent):void {
	lbl1.x=mouseX+15;
	lbl1.y=mouseY+15;
}

function MouseDownHandler(e:MouseEvent):void {
	//点击一次后,取消鼠标跟随,并移除lbl1,同时也取消鼠标点击事件(即本事件仅触发一次)
	Mouse.cursor=MouseCursor.ARROW;
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMoveHandler);
	lbl1.visible=false;
	removeChild(lbl1);
	stage.removeEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);

	InitVelocity();//初始化粒子速度
	
	addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

function InitVelocity() {
	for (var i=0; i<ArrBall.length; i++) {
		ArrBall[i].vx = (Math.random()*2-1) * 30 ;//注意这里的小技巧: Math.random()*2-1即得到一个在-1到1之间分布的随机小数,即小球随机向左或向右的初始速度,然后再放大N倍,得到x轴最终速度
		ArrBall[i].vy = (Math.random()*2-1) * 30;
	}

}


function EnterFrameHandler(e:Event):void {
	for (i=ArrBall.length-1; i>=0; i--) {
		var ball:Ball = ArrBall[i];		
		ball.x += (ball.vx );
		ball.y += (ball.vy );		
		//检测边界,如果超出屏幕则移除该对象(注:从舞台上移除不再使用的对象,能使CPU占用率有效降低)		
		if (ball.x < -ball.width/2 || ball.x > stage.stageWidth + ball.width/2 || ball.y< -ball.height/2 || ball.y > stage.stageHeight + ball.height/2){		
			removeChild(ball);
			ArrBall.splice(i,1);
		}
		
		//如果数组已经为空,则清除EnterFrame事件
		if (ArrBall.length==0){
			removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
		}
		
		//trace(ArrBall.length);
		
		
	}
}

粒子喷射:

如果看过上篇Flash/Flex学习笔记(23):运动学原理 并动手实践过"自由落体运动"的朋友,对于这种粒子效果可能比较容易理解。

原理:将所有粒子聚集于屏幕上某点(本例中为屏幕底部中心点),然后赋给一个随机向上的速度(这样就能向上喷射出),同时为了更效果更自然,还要加入随机的x轴方向速度(以实现喷射过程中的扩散),最后再加入重力加速度,以实现粒子的自由回落。

效率:为了能最大限度的利用现有对象,当粒子跑出舞台边界时,重新用代码将其定位到发射点,以便下次继续喷射。

交互:本例中为增强交互性,用鼠标的x轴位置模拟了风力影响。(在水平方向移动鼠标可看到喷射方向略有变化)

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	public class Fountain extends Sprite {
		private var count:int=3000;
		private var wind:Number=0.0;

		private var gravity:Number=0.3;
		private var balls:Array;
		public function Fountain() {
			init();
		}
		private function init():void {
			stage.scaleMode=StageScaleMode.NO_SCALE;
			stage.align=StageAlign.TOP_LEFT;
			balls = new Array();
			for (var i:int = 0; i < count; i++) {
				var ball:Ball=new Ball(1,0xffffff);
				ball.x=stage.stageWidth/2;
				ball.y=stage.stageHeight;
				ball.vx = (Math.random()*2-1) * 1.5 + wind;
				ball.vy=-5+Math.random()*-10;
				addChild(ball);
				balls.push(ball);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(event:Event):void {
			wind = -1*(mouseX - stage.stageWidth/2)/200;
			for (var i:Number = 0; i < balls.length; i++) {
				var ball:Ball=Ball(balls[i]);
				ball.vy+=gravity;
				ball.x+=ball.vx;
				ball.y+=ball.vy;
				if (ball.x > stage.stageWidth + ball.radius || ball.x < -ball.radius || ball.y >stage.stageHeight + ball.radius || ball.y<-ball.radius) {
					ball.x=stage.stageWidth/2;
					ball.y=stage.stageHeight;
					ball.vx = (Math.random()*2-1) * 1.5 + wind;
					ball.vy=-5+Math.random()*-10;
				}
			}
		}
	}
}

粒子跟随:

除了利用边界检测移除粒子外,在实际开发中也经常利用时间来判断,比如一个对象在舞台上存活几秒后,便将其干掉。

stage.addEventListener(MouseEvent.MOUSE_MOVE,MouseMoveHandler);

function MouseMoveHandler(e:MouseEvent):void{
	var ball:Ball = new Ball(Math.random()*3,0x00ff00);
	ball.x = mouseX;
	ball.y = mouseY;
	ball.vx = (Math.random()*2-1)*3;
	ball.vy = (Math.random()*2-1)*3;
	addChild(ball);
	ball.addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void{
	var ball:Ball = e.target as Ball;
	ball.x += ball.vx;
	ball.y += ball.vy;
	ball.count ++;
	if (ball.count>=50){
		ball.removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
		removeChild(ball);		
	}
}

注:需要先在Ball类中增加一个public var count:uint=0;变量(用来辅助计时),上面的代码中用 if ball.count>=50做判断,相当于每个小球只让其播放50帧对应的时间就寿终正寝

模拟布朗运动:

var Count:Number=200;

//初始化
for (var i:Number=0; i<=Count; i++) {
	var ball:Ball=new Ball(Math.random()*3,0x00ff00);
	ball.x=Math.random()*stage.stageWidth;
	ball.y=Math.random()*stage.stageHeight;
	ball.vx=ball.vy=0;
	addChild(ball);
	ball.addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void {
	var ball:Ball=e.target as Ball;
	//每一帧让其速度随机变化一点点
	ball.vx += (Math.random()*2-1)*2;
	ball.vy += (Math.random()*2-1)*2;
	
	ball.x+=ball.vx;
	ball.y+=ball.vy;
	
	//超出边界后,先让其反向运动一次(即:退回原处),然后速度反向
	if (ball.x>stage.stageWidth-ball.width/2||ball.x<ball.width/2) {
		ball.x-=ball.vx;
		ball.vx*=-1;
	}

	if (ball.y>stage.stageHeight-ball.height/2||ball.y<ball.height/2) {
		ball.y-=ball.vy;
		ball.vy*=-1;
	}
	
	//加入摩擦力因子,看起来更自然
	ball.vx=ball.vx*0.9;
	ball.vy=ball.vy*0.9;
}

目录
相关文章
|
内存技术
Flash/Flex学习笔记(56):矩阵变换
先回顾一下Silvelright中的矩阵变换[转]WPF中的MatrixTransform,简单点讲:矩阵变换能改变对象的x,y坐标,x或y方向上的缩放,以及对象在x,y轴上的旋转(扭曲变形) 上面这个是WPF/Silverlight中的3*3变换矩阵,其中X,Y用于改变对象的坐标;M11,M22用于对象在x,y轴上的缩放;而M12,M21用于y轴,x轴上的扭曲。
869 0
Flash/Flex学习笔记(54):迷你滚动条ScrollBar
先看最终效果: 整个swf最终不到4k,如果用系统的组件List来做的话,最终尺寸会接近30k ! (当然,核心代码是从网上收集到的:))   大致原理: 把要显示的对象上面加一层遮罩,然后根据滚动条的位置,上下移动显示对象。
954 0
|
索引 容器 内存技术
Flash/Flex学习笔记(52):使用TweenLite
TweenLite是第三方出品的专用于各种缓动动画的类库,其性能据说已经超过了Adobe官方的Tween. 从网上找到了一篇中文的说明文档:http://files.cnblogs.com/yjmyzz/tweenLite%e4%b8%ad%e6%96%87%e6%89%8b%e5%86%8c%e4%b8%8e%e5%8f%82%e6%95%b0%e8%af%b4%e6%98%8e.
946 0
|
内存技术
Flash/Flex学习笔记(57):实用技巧
布朗运动: varnumDots:uint=50; varfriction:Number=0.9; vardots:Array; varlife:uint=0; functioninit(){ graphics.
772 0
|
Java 内存技术 Spring
Flash/Flex学习笔记(44):万有引力与粒子系统
万有引用公式: 其中G为万有引力常数   var numParticles:uint=50;//粒子总数 var G:Number=0.03;//万有引力常数 var particles:Array=new Array(numParticles); var bounce:Number=-0.
819 0
|
Java Spring 内存技术
Flash/Flex学习笔记(41):碰撞检测
碰撞检测基本上可能分为二类:对象与对象的碰撞检测、对象与点的碰撞检测 为了方便测试,先写一个box类(生成一个小矩形) package { import flash.display.Sprite; public class Box extends Sprite { ...
870 0
|
内存技术
Flash/Flex学习笔记(36):自己动手实现一个滑块控件(JimmySilder)
先看最终的演示: 滑块条的应用实在太广泛了:mp3播放器中声量的大小控制,视频播放时的画面亮度调节,阅读新闻时字体大小的实时调整,对象的大小互动控制... 分析: 1.任何一个滑块条控件的UI部分,基本上可以分为:背景滑块条 + 滑块按钮 二个部分 所以我分成了三部分: J...
886 0