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


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);
}
}
}
### 回答1: OpenGL是一个图形库,轨迹球是一种常见的交互技术,用于实现对物体的旋转操作。而鼠标是常见的输入设备,可以用来控制轨迹球的旋转。 要实现鼠标旋转功能,我们可以按照以下步骤进行: 1. 首先,我们需要获取鼠标的输入。在OpenGL中,可以使用操作系统提供的API来获取鼠标坐标和鼠标按钮事件。 2. 接下来,我们需要将鼠标坐标转换为OpenGL坐标。鼠标的坐标范围是屏幕上的像素坐标,而OpenGL使用的是归一化坐标系。我们可以使用视口变换函数来进行转换。 3. 然后,我们需要将鼠标移动量转换为物体的旋转量。可以根据鼠标在屏幕上的移动距离来计算旋转矩阵。一种常见的方法是使用四元数来表示旋转。 4. 最后,我们需要将旋转矩阵应用到物体上,在渲染时实现旋转效果。可以将旋转矩阵与物体的模型矩阵相乘,得到最终的变换矩阵。 使用轨迹球实现鼠标旋转功能可以提供良好的用户交互体验。它可以通过鼠标在屏幕上的移动来实现物体的旋转,而且操作简单直观。通过使用OpenGL和轨迹球技术,我们可以轻松实现鼠标旋转功能,为用户提供更加灵活和自由的操作方式。 ### 回答2: OpenGL轨迹球是一种常用的技术,可以实现通过鼠标控制物体的旋转。具体实现步骤如下: 1. 初始化:创建OpenGL窗口,并将透视视图设置为合适的视角。 2. 定义视图变量:使用四元数来记录物体的旋转状态。初始状态下,视图变量为单位四元数。 3. 鼠标操作:根据鼠标移动来计算旋转的角度。通过获取当前鼠标位置与上一帧鼠标位置的差值,可以计算出鼠标在屏幕上的平移方向。 4. 将鼠标平移方向转换为旋转方向:将鼠标在屏幕上的平移向量转换为场景中的旋转向量。可以通过将鼠标平移向量与视图矩阵的逆矩阵相乘来实现。 5. 计算旋转角度:使用三角函数,通过计算旋转向量的长度来获取旋转角度。 6. 更新视图变量:根据旋转角度和旋转向量,更新视图变量。可以将旋转向量乘以旋转角度,并与当前视图变量相乘。 7. 绘制场景:根据更新后的视图变量进行场景渲染,将旋转效果显示出来。 8. 循环操作:通过循环将上述步骤持续执行,实现实时的鼠标旋转效果。 通过以上步骤,可以实现用OpenGL轨迹球来实现鼠标旋转效果。该实现可以使用户更加直观地进行物体的旋转操作,提高交互体验。 ### 回答3: OpenGL 轨迹球实现鼠标旋转是一种常见的交互技术,在3D视图中允许用户通过鼠标拖动来旋转模型或场景。 首先,需要获取鼠标移动事件并将其转换为旋转角度。一种常见的方法是通过记录鼠标在屏幕上的位置差异来计算旋转角度的增量。例如,当鼠标向右移动时,模型应该顺时针旋转。因此,可以使用鼠标水平移动的数量来计算旋转角度的增量。 然后,需要将旋转角度应用于模型或场景。在OpenGL中,可以使用旋转矩阵来实现这一点。最简单的方法是通过glRotate函数来应用旋转矩阵。该函数接受旋转角度和旋转轴作为参数,并将其应用于当前模型视图矩阵中。例如,可以使用glRotatef函数来实现简单的旋转。 最后,需要在主循环中重绘场景以显示旋转效果。当鼠标移动时,需要重新计算旋转角度并重新绘制场景。通过将新的旋转角度应用于模型视图矩阵,然后重绘场景,可以实现平滑的旋转动画。 综上所述,使用OpenGL的轨迹球实现鼠标旋转涉及获取鼠标移动事件,计算旋转角度,应用旋转角度到模型视图矩阵,以及重绘场景。这一技术可以增强用户交互性,并且在很多3D应用程序中得到广泛应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值