`

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

 
阅读更多
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);
		}
	}
}
分享到:
评论

相关推荐

    html形星系动画特效

    这种特效通常会在用户移动鼠标时激活,使得页面上的元素根据鼠标的移动轨迹进行动态的解体、分散或重组,呈现出一种动态的、科幻般的视觉效果。 首先,我们来看HTML部分。HTML是超文本标记语言,它是网页的基础结构...

    跟随鼠标旋转的流星.rar

    标题 "跟随鼠标旋转的流星.rar" 提供的信息表明,这个压缩包可能包含一个互动的图形或编程项目,其中的元素(可能是图像或者动画)会随着鼠标的移动而动态旋转,模拟流星的效果。这种效果通常在游戏、网页特效或教学...

    js跟随鼠标移动旋转心形特效.zip

    在这个特效中,每当你移动鼠标,心形就会改变它的旋转角度,模拟出跟随的效果。 至于压缩包内的文件"jiaoben20150612",这可能是源代码文件或者相关的资源文件,可能包含了实现这个特效的HTML、CSS和JavaScript代码...

    html5-whale_HTML网页动画鲨鱼_可跟随鼠标移动_whaleindex_

    开发者会使用JavaScript或者相关的库(如CreateJS、Pixi.js等)来编写代码,控制鲨鱼的运动轨迹和行为,使其能够随着鼠标的移动而移动。 JavaScript在HTML5动画中扮演着至关重要的角色。通过监听鼠标的移动事件,...

    Canvas鼠标移动控制火箭飞行动画特效

    这个特效允许用户通过鼠标移动来改变火箭的飞行轨迹,并且通过鼠标单击并长按来加速火箭的飞行速度。我们将重点讨论以下几个关键知识点: 1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的画布元素,允许...

    Flash实现沿路径飞行、旋转的动画实例.rar

    在本文中,我们将深入探讨如何使用Flash来实现沿路径飞行并旋转的动画效果。这个实例是基于Flash的动作脚本(ActionScript),一个强大的编程语言,用于控制Flash中的交互性和动画。通过理解并应用这些知识,你可以...

    鼠标随移动的方向而改变.rar

    4. **动画路径**:元素沿着鼠标移动的轨迹产生动画效果,如粒子效果或线条绘制。 压缩包内的文件`index.htm`是主网页文件,可能包含了实现这一特效的HTML结构和JavaScript代码。`说明.htm`可能是提供关于如何使用或...

    gtk和opengl实现轨迹球程序

    轨迹球的工作原理是通过追踪鼠标在球面上的运动路径,将这些轨迹转化为旋转矩阵,从而更新相机的视角。 描述中提到,这个程序实现了球体的“自动旋转”和“任意旋转操作”。自动旋转意味着程序可以设定一个初始的...

    html5实现的可跟随鼠标移动银河星系流星雨背景动画特效源码.zip

    本资源“html5实现的可跟随鼠标移动银河星系流星雨背景动画特效源码.zip”显然是一个利用HTML5特性构建的动态背景效果,允许用户通过鼠标移动来操控银河星系和流星雨的动画。以下将详细讲解实现此类特效所涉及的...

    Canvas跟随鼠标光标动画特效.zip

    - **轨迹效果**:例如,创建光标留下的轨迹,或者元素围绕鼠标旋转等。 6. **性能优化**: - **clearRect()**:在每一帧开始前清空Canvas,防止旧的图像残留,提高视觉效果的清晰度。 - **条件绘制**:只有当...

    切水果的鼠标跟随特效

    在“切水果”游戏中,当用户移动鼠标时,会看到一个模拟刀片的图形跟随鼠标轨迹,切割屏幕上的水果。这种特效需要对鼠标的实时位置进行跟踪,并动态渲染图形。 3. **事件驱动编程**:VC++采用事件驱动编程模型,这...

    CSS3绘制怪物表情动画特效.zip

    1. ****:通过JavaScript的Canvas API,可以直接在画布上绘制和修改像素,实现高度定制的动画效果,如动态眼睛、嘴巴的运动轨迹。 2. **SVG**:可缩放矢量图形(SVG)是一种用于绘制图形的XML标记语言,适用于创建...

    计算机图形学 visual c++ 6.0 实时动画(有注释).zip

    `WinMain`函数用于初始化窗口,而`Message Loop`则负责接收和处理系统消息,如键盘输入和鼠标移动,这些都可能触发动画的更新。 2. **GDI(Graphics Device Interface)**:Visual C++ 6.0中,GDI是用于绘制2D图形...

    HTML5 Canvas绘制梅雨季节在雨中撑伞行走的路人动画效果源码.zip

    在这个雨中行人动画中,开发者可能用到了`moveTo()`和`lineTo()`来描绘雨滴下落的轨迹,以及`ellipse()`或者`arc()`来绘制伞的形状。 2. **动画原理**:实现动画效果通常需要定时更新画面。通过`...

    HTML5 canvas绘制实现的撑杆僵尸动画效果源码.zip

    3. **坐标系统与变换**:canvas使用笛卡尔坐标系,通过translate()、rotate()、scale()等方法可以改变画布的坐标系,实现物体的移动、旋转和缩放效果,这对于动画中的运动轨迹至关重要。 4. **事件监听**:通过监听...

    HTML5 Canvas实现鼠标响应式重力云粒子动画效果源码.zip

    2. **鼠标事件处理**:通过JavaScript的`addEventListener`方法,可以监听鼠标的`mousemove`事件,当鼠标在Canvas上移动时,获取鼠标的坐标位置,然后将这些坐标作为粒子动画的互动参考点。 3. **粒子系统**:粒子...

    html5 canvas绘制酷炫3D拖动圆点动画特效源码.zip

    5. **事件处理**:“拖动”一词意味着用户可以与动画进行交互,可能是通过鼠标或触摸事件来改变圆点的运动轨迹或行为。这可能涉及到监听`mousedown`、`mousemove`和`mouseup`事件,根据用户的输入更新圆点的状态。 ...

    纯CSS3绘制的小老虎动画效果源码.zip

    在小老虎动画中,可能会用到translate()来移动元素,rotate()来旋转元素,scale()来放大或缩小元素,以及skew()来对元素进行倾斜。这些变形可以组合使用,创造出复杂的运动轨迹和视觉效果。 接着,CSS3的过渡...

    Flash下落动画 落体 飘落动画,纸屑飘落.rar

    5. **交互性**:除了预设的动画,你还可以添加用户交互,如点击触发更多纸屑飘落,或者通过鼠标移动改变风向。这将使动画更加生动有趣。 6. **发布与兼容性**:最后,记得在完成动画后导出为SWF格式,以便在网页上...

Global site tag (gtag.js) - Google Analytics