`

动画旋转移动、沿鼠标绘制轨迹移动

 
阅读更多
package common{
	import core.App;
	import core.Clip;
	import core.UIElement;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.utils.getDefinitionByName;
	
	public class Index extends UIElement{
		private var butterNum:Number=2;//动画的个数
		private var butterArr:Array;//动画数组***************
		private var easingArr:Array;//缓动系数
		private var vxArr:Array;//X轴速度
		private var vyArr:Array;//Y轴速度
		
		private var left:Number=0;//动画运动的范围,左
		private var right:Number=App.width;//右
		private var top:Number=0;//上
		private var bottom:Number=App.height;//下
		
		//以下参数关于速度变换
		private var myDate:Date;
		private var preTimeArr:Array;//上次变换速度的时间
		private var changeSpeedArr:Array;//间隔多少毫秒换所有的速度
		
		//以下参数控制是否自动播放还是鼠标控制
		private var inMouseContral:Array;//动画移动是否受鼠标控制
		private var targetBX:Number=0;//鼠标控制动画移动时所要达到的目标点位置
		private var targetBY:Number=0;
		
		//下面的参数是其中一只动画根据用户画的轨迹而飞。
		private var mouseTracks:Array;//鼠标画的轨迹。
		private var justPress:Boolean=true;//是否只是单击,如果为否,则是依轨迹飞行,如果为true,则表示只是飞到鼠标点击到的位置。
		private var spriteA:Sprite;//画轨迹线
		
		public function Index(){
			init();
		}
		private function init():void{
			myDate=new Date();//速度变换
			butterArr=new Array();//动画数组
			vxArr=new Array();//X轴速度
			vyArr=new Array();//Y轴速度
			easingArr=new Array();//缓动系数
			preTimeArr=new Array();//上次变换速度的时间
			changeSpeedArr=new Array();//间隔多少毫秒换所有的速度
			inMouseContral=new Array();//动画移动是否受鼠标控制
			mouseTracks=new Array();//鼠标画的轨迹
			this.spriteA=new Sprite();//画轨迹线
			this.spriteA.x=this.spriteA.y=0;
			addChild(this.spriteA);
			for(var i:int=0;i<butterNum;i++){
				butterInit(i);
			}
			App.stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouse_Down);
			App.stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouse_Move);
			App.stage.addEventListener(MouseEvent.MOUSE_UP,onMouse_Up);
			App.doInterval(this.doPageTime);
		}
		//动画初始化
		private function butterInit(num:Number):void{
			var myMovie:Clip=new Clip("effect.Clip_2068");
			myMovie.loop=true;
			myMovie.play();
			myMovie.x=Math.random()*App.width;
			myMovie.y=Math.random()*App.height;
			addChild(myMovie);
			butterArr.push(myMovie);
			
			vxArr[num]=-Math.random()*3;//速度赋值(最大-3像素)
			vyArr[num]=Math.random()*6-3;//区别于X速度(最大3像素)
			
			easingArr[num]=Math.round(Math.random()*3+1)*0.1;//缓动系数
			
			myDate=new Date();
			preTimeArr[num]=myDate.getTime();//前一时间
			changeSpeedArr[num]=Math.round(Math.random()*5+5)*1000;//间隔多少毫秒换所有的速度(5-10秒)
			inMouseContral[num]=false;//是否鼠标控制
		}
		private function onMouse_Down(evt:MouseEvent):void{
			inMouseContral[0]=false;//不是鼠标控制,可以自主飞行***********************
			mouseTracks.splice(0);//删除路径数组中的所有值
			this.spriteA.graphics.clear();
			this.spriteA.graphics.lineStyle(2,0x00ff00);
			this.spriteA.graphics.moveTo(mouseX,mouseY);
		}
		private function onMouse_Move(evt:MouseEvent):void{
			if(evt.buttonDown){
				var thisArr:Array=new Array();//当前的点坐标的数据
				if(mouseTracks.length>=1){
					//平滑处理第一步(简单的除2)
					thisArr[0]=(mouseX+mouseTracks[mouseTracks.length-1][0])/2;
					thisArr[1]=(mouseY+mouseTracks[mouseTracks.length-1][1])/2;
					//平滑处理第二步(倒数第二点、当前点,修正最后一点)
					if(mouseTracks.length>=2){
						var leftP:int=mouseTracks.length-2;
						var centerP:int=mouseTracks.length-1;
						mouseTracks[centerP][0]=(mouseTracks[leftP][0]+thisArr[0])/2;
						mouseTracks[centerP][1]=(mouseTracks[leftP][1]+thisArr[1])/2;
					}
				}
				else{
					thisArr[0]=mouseX;
					thisArr[1]=mouseY;
				}
				mouseTracks.push(thisArr);
				this.spriteA.graphics.lineTo(thisArr[0],thisArr[1]);
			}
		}
		private function onMouse_Up(evt:MouseEvent):void{
			//如果路径里没有数据,则没有画轨迹
			inMouseContral[0]=true;//仅控制下标为0的一个动画跟随鼠标移动
			this.justPress=mouseTracks.length==0;//判断是否是仅仅点击一下
			if(this.justPress){
				this.targetBX=mouseX;
				this.targetBY=mouseY;
			}
			else{
				//重绘四部曲!~~
				this.spriteA.graphics.clear();//将没有进行第二步平滑处理的线条删了,重新画
				this.spriteA.graphics.lineStyle(2,0x00ff00);
				this.spriteA.graphics.moveTo(mouseTracks[0][0],mouseTracks[0][1]);
				//重绘所有经过二次平滑处理的线
				for(var i:int=1;i<mouseTracks.length;i++){
					this.spriteA.graphics.lineTo(mouseTracks[i][0],mouseTracks[i][1]);
				}
			}
		}
		private function doPageTime():void{
			for(var i:int=0;i<butterNum;i++){
				ButterflysMove(butterArr[i],i);
			}
		}
		private function ButterflysMove(mc:Clip,num:Number):void{
			//鼠标弹起的时候,才对需要跟随轨迹运行的动画,赋true
			if(inMouseContral[num]==true){
				if(this.justPress) MouseContral(mc,this.targetBX,this.targetBY,num);//动画朝单击点飞行
				else moveFollowMouse(mc,0);//动画绕鼠标画的运动轨迹飞行
			}
			//自己自动飞行
			else{
				AutoMove(mc,num);
			}
		} 
		//动画跟随鼠标画的运动轨迹飞行
		private function moveFollowMouse(mc:Clip,num:Number):void{
			//没有值,就是走到轨迹尽头了,则重置相关变量
			if(mouseTracks.length==0){
				this.spriteA.graphics.clear();
				inMouseContral[num]=false;
				myDate=new Date();
				preTimeArr[num]=myDate.getTime();//上次变换速度的时间
				changeSpeedArr[num]=2000;//停多少秒就自由飞行
				vxArr[num]=0;
				vyArr[num]=0;
			}
			else{
				var targetX:int=mouseTracks[0][0];
				var targetY:int=mouseTracks[0][1];
				var dx:int=targetX-mc.x;
				var dy:int=targetY-mc.y;
				var dist:int=Math.sqrt(dx*dx+dy*dy);//计算出距离
				//当前点和目标点的距离大于1,才需要变换角度,这也是平滑处理的一部分
				if(dist>1) this.centerRotate(mc,Math.atan2(dy,dx)*180/Math.PI);
				mc.x=targetX-mc.width/2;
				mc.y=targetY-mc.height/2;
				mouseTracks.shift();//删除刚刚已经使用过的第一个位置
			}
		}
		//动画朝单击点飞行
		private function MouseContral(mc:Clip,targetX:Number,targetY:Number,num:Number):void{
			var dx:int=targetX-mc.x;
			var dy:int=targetY-mc.y;
			var angle:Number=Math.atan2(dy,dx);//这是mc的角度
			this.centerRotate(mc,angle*180/Math.PI);
			//和目标点的距离小于1
			if(Math.sqrt(dx*dx+dy*dy)<1){
				//重置动画的各个参数
				inMouseContral[num]=false;//说明飞到了目标点了,可以自主飞行了
				mc.x=targetX;
				mc.y=targetY;
				myDate=new Date();
				preTimeArr[num]=myDate.getTime();
				changeSpeedArr[num]=2000;//停多少秒就自由飞行
				vxArr[num]=0;//让动画速度为0 ,即到达目标点后休息下,在自由飞行
				vyArr[num]=0;
				
			}
			else{
				//实现了先快后慢的缓动
				mc.x+=dx*easingArr[num];
				mc.y+=dy*easingArr[num];
			}
		}
		private function centerRotate(mc:UIElement,angle:Number):void{
			var currentRotation:Number = mc.rotation;
			//获取mc不旋转时候的尺寸
			mc.rotation=0;
			var mcWidth:Number=mc.width;
			var mcHeight:Number=mc.height;
			mc.rotation=currentRotation;
			
			//获取mc当前中心点坐标
			var pointO:Point=mc.localToGlobal(new Point(Math.min(mcWidth/2,mcHeight/2),Math.min(mcWidth/2,mcHeight/2)));
			
			//旋转mc
			mc.rotation=angle;
			
			//获取mc旋转后中心点坐标
			var pointO2:Point=mc.localToGlobal(new Point(Math.min(mcWidth/2,mcHeight/2),Math.min(mcWidth/2,mcHeight/2)));
			//平移到原来中心点O
			var p3:Point=pointO.subtract(pointO2);
			var matrix:Matrix=mc.transform.matrix;
			matrix.translate(p3.x, p3.y);
			
			mc.transform.matrix=matrix;
        }
		//动画自由飞行。。。。。。。
		private function AutoMove(mc:Clip,num:Number):void{
			myDate=new Date();
			var thisTime:Number=myDate.getTime();
			//达到变换速度的时间间隔,X,Y轴速度都换
			if((thisTime-preTimeArr[num])>changeSpeedArr[num]){
				preTimeArr[num]=thisTime;
				vxArr[num]=-Math.random()*3;
				vyArr[num]=Math.random()*6-3;
				changeSpeedArr[num]=Math.round(Math.random()*5+5)*1000;//重新赋值时间间隔。
			}
			mc.x+=vxArr[num];//随机产生的一个位移,其实也就相当与一个移动速度
			mc.y+=vyArr[num];
			//以下是出界处理,到边界后,不到速度变换的时间,按照修正后的位置执行。
			if(mc.x<left){
				mc.x=left;
				vxArr[num]*=-1;
			}
			if(mc.x>right){
				mc.x=right;
				vxArr[num]*=-1;
			}
			if(mc.y<top){
				mc.y=top;
				vyArr[num]*=-1;
			}
			if(mc.y>bottom){
				mc.y=bottom;
				vyArr[num]*=-1;
			}
			//因为动画到达鼠标点击的位置后,会重置速度为0,所以导致方向变换,在这里就做限制
			if(vyArr[num]!=0&&vxArr[num]!=0) this.centerRotate(mc,Math.atan2(vyArr[num],vxArr[num])*180/Math.PI);
		}
	}
}
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics