粒子爆炸:
仍然要用到以前的小球类,不过稍加改造
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; }