Flash/Flex学习笔记(25):摩擦力与屏幕环绕

2018-01-19 11:52:27 浏览数 (1)

摩擦力:

假如一个物体在某个方向上沿直线运行,摩擦力会使该方向上的速度越来越小,直到停止。

上图示意了该过程,物体以moveAngle角度正向运动,最终的速度speed矢量为vx矢量与vy矢量的矢量和,在每个单位时间内的位移即Speed矢量的大小,分解到x,y轴后,即为vx与vy;加入摩擦力后,speed矢量每单位时间将减少Friction值,也就是视觉上的越来越慢。

代码语言:javascript复制
var ball:Ball = new Ball(10);
ball.x = stage.stageWidth/2;
ball.y = stage.stageHeight/2;
addChild(ball);
Mouse.cursor = MouseCursor.BUTTON;
var Velocity:Number = 10;//速度最大值
var friction = 0.4;//摩擦力因子
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);

function MouseDownHandler(e:MouseEvent):void{
	graphics.clear();
	//初始化小球位置以速度
	ball.x = stage.stageWidth/2;
	ball.y = stage.stageHeight/2;
	ball.vx = (Math.random()*2-1) * Velocity;
	ball.vy = (Math.random()*2-1) * Velocity;	
	graphics.moveTo(ball.x,ball.y);
	graphics.lineStyle(1,0xcccccc,1);
}

function MouseUpHandler(e:MouseEvent):void{	
	addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void{
	ball.x  = ball.vx;
	ball.y  = ball.vy;
	
	var speed:Number = Math.sqrt(ball.vx*ball.vx   ball.vy*ball.vy);
	var moveAngle = Math.atan2(ball.vy,ball.vx);
	
	speed -= friction;
	
	//减速后的新速度
	ball.vx = speed*Math.cos(moveAngle);
	ball.vy = speed*Math.sin(moveAngle);
	
	//防止减速过度,就成反向运动
	if (speed<=friction){
		ball.vx = 0;
		ball.vy = 0;
		removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
	}	
	graphics.lineTo(ball.x,ball.y);
	
}

上面这种方法从物理意义上讲最接近现实情况,不过有些复杂,在实际开发中还有一种更简单的办法,虽然不怎么严密,但从视觉效果上很难看出问题

代码语言:javascript复制
var ball:Ball = new Ball(10);
ball.x = stage.stageWidth/2;
ball.y = stage.stageHeight/2;
addChild(ball);
Mouse.cursor = MouseCursor.BUTTON;
var Velocity:Number = 10;
var friction = 0.9;//摩擦力因子(小于1大于0即可)
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);

function MouseDownHandler(e:MouseEvent):void{
	graphics.clear();	
	ball.x = stage.stageWidth/2;
	ball.y = stage.stageHeight/2;
	ball.vx = (Math.random()*2-1) * Velocity;
	ball.vy = (Math.random()*2-1) * Velocity;	
	graphics.moveTo(ball.x,ball.y);
	graphics.lineStyle(1,0xcccccc,1);
}

function MouseUpHandler(e:MouseEvent):void{	
	addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void{
	ball.x  = ball.vx;
	ball.y  = ball.vy;
	
	ball.vx = ball.vx * friction;//直接让x轴速度不断衰减
	ball.vy = ball.vy * friction;//直接让y轴速度不断衰减	
	
	if (Math.abs(ball.vx)<=0.0001 || Math.abs(ball.vy)<=0.0001){
		ball.vx = 0;
		ball.vy = 0;
		removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
	}	
	
	//trace(ball.vx);
	//trace(ball.vy);
	graphics.lineTo(ball.x,ball.y);
	
}

屏幕环绕:

这个叫法也许从字面上不太直观,说得更白一点就是:一个物体如果在运动过程中跑出了舞台边界,开发人员就要想办法让其从舞台的另一端出现,并继续运动,以保持连贯。前面的一篇文章 Flash/Flex学习笔记(23):运动学原理 中有一个飞船的示例,加入屏幕环绕处理后,代码如下:

代码语言:javascript复制
package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import fl.controls.Label;
	
	public class ShipSim2 extends Sprite {
		
		private var ship:Ship;
		private var vr:Number=0;
		private var thrust:Number=0;
		private var vx:Number=0;
		private var vy:Number=0;		
		
		public function ShipSim2() {
			init();
		}
		
		private function init():void {
			stage.scaleMode=StageScaleMode.NO_SCALE;
			stage.align=StageAlign.TOP_LEFT;			
			
			ship = new Ship();
			addChild(ship);
			ship.x=stage.stageWidth/2;
			ship.y=stage.stageHeight/2;
			addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyDownHandler);
			stage.addEventListener(KeyboardEvent.KEY_UP, KeyUpHandler);
		}
		
		private function KeyDownHandler(event:KeyboardEvent):void {
			switch (event.keyCode) {
				case Keyboard.LEFT :
					vr=-5;
					break;
				case Keyboard.RIGHT :
					vr=5;
					break;
				case Keyboard.UP :
					thrust=0.2;
					ship.draw(true);
					break;
				default :
					break;
			}
		}
		
		private function KeyUpHandler(event:KeyboardEvent):void {
			vr=0;			
			thrust=0;
			ship.draw(false);
		}
		
		private function EnterFrameHandler(event:Event):void {
			ship.rotation =vr;
			var angle:Number=ship.rotation*Math.PI/180;
			var ax:Number=Math.cos(angle)*thrust;
			var ay:Number=Math.sin(angle)*thrust;
			vx =ax;
			vy =ay;
			ship.x =vx;
			ship.y =vy;
			var left:Number=0;
			var right:Number=stage.stageWidth;
			var top:Number=0;
			var bottom:Number=stage.stageHeight;
			//屏幕环绕处理
			if (ship.x>right   ship.width/2) {
				ship.x=left-ship.width/2;
			} else if (ship.x < left - ship.width/2) {
				ship.x=right ship.width/2;
			}
			if (ship.y-ship.height/2>bottom) {
				ship.y=top-ship.height/2;
			} else if (ship.y < top - ship.height / 2) {
				ship.y=bottom ship.height/2;
			}
		}
	}
}

最后把这二者结合起来,看下效果:

0 人点赞