+ -
当前位置:首页 → 问答吧 → 请教一个鼠标移动速度控制图片移动快慢的问题(期待高人指点)

请教一个鼠标移动速度控制图片移动快慢的问题(期待高人指点)

时间:2011-04-20

来源:互联网

我想实现如下功能:
第一种情况是:鼠标按下并拖动MC时,MC可以随着鼠标缓动;
第二种情况是:鼠标按下并快速划动时,MC缓动的距离比第一种情况要大(类似丢出去的效果)。
我的思路:鼠标按下记录坐标点 (point_x,point_y),通过moseMove来更新目标点(target_x 和target_y),并调用tweenlite缓动函数来移动图片。
当鼠标弹起时,判断鼠标按下和弹起的时间间隔,如果时间间隔小于200毫秒,就让图片以目标点(target_x 和target_y)5倍的距离进行缓动,达到丢出去的效果。不过代码有点问题。。。。。。。。。

以下是我的代码,不过两个tweenlite之间有冲突,不知道怎么解决,望高人指点
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//导入TweenLite类
import com.greensock.*;
import com.greensock.easing.*;

var down:Boolean = false;
var point_x:Number, point_y:Number;
var downTimer:Number, upTimer:Number;
target_x = my_mc._x;
target_y = my_mc._y;

var mouseListener:Object = new Object();

//鼠标按下
mouseListener.onMouseDown = function() {
       down = true;
       //记录鼠标按下时的坐标
       point_x = _xmouse;
       point_y = _ymouse;
       downTimer = getTimer();
};

//鼠标移动
mouseListener.onMouseMove = mouseMoving;

//鼠标弹起
mouseListener.onMouseUp = function() {
       down = false;
       upTimer = getTimer() - downTimer;
       if (upTimer < 200) {
              target_x_q = target_x * 5;
              target_y_q = target_y * 5;
              //判断可移动的范围
              checkArea_quick(my_mc)
              //执行移动
              moveMC_quick(my_mc);
       }
};
Mouse.addListener(mouseListener);

//鼠标移动函数
function mouseMoving() {
       if (down) {
              target_x += _xmouse - point_x;
              target_y += _ymouse - point_y;
              point_x = _xmouse;
              point_y = _ymouse;
              //判断可移动的范围
              checkArea(my_mc);
              //执行移动
              moveMC(my_mc);
       }
}
//影片剪辑正常缓动
function moveMC(mc:MovieClip) {
       TweenLite.to(mc,1,{_x:target_x, _y:target_y, ease:Quint.easeOut});
}
//影片剪辑加速缓动
function moveMC_quick(mc:MovieClip) {
       TweenLite.to(mc,1,{_x:target_x_q, _y:target_y_q, ease:Quint.easeOut});
}
//限制影片剪辑的移动范围
function checkArea(mc:MovieClip) {
       if (target_x >= 0) {
              target_x = 0;
       }
       if (target_y >= 0) {
              target_y = 0;
       }
       if (target_x <= Stage.width - mc._width) {
              target_x = Stage.width - mc._width;
       }
       if (target_y <= Stage.height - mc._height) {
              target_y = Stage.height - mc._height;
       }
}

function checkArea_quick(mc:MovieClip) {
       if (target_x_q >= 0) {
              target_x_q = 0;
       }
       if (target_y_q >= 0) {
              target_y_q = 0;
       }
       if (target_x_q <= Stage.width - mc._width) {
              target_x_q = Stage.width - mc._width;
       }
       if (target_y_q <= Stage.height - mc._height) {
              target_y_q = Stage.height - mc._height;
       }
}

[ 本帖最后由 kaba47 于 2011-4-20 17:25 编辑 ]

附件

鼠标移动快慢.rar (279.38 KB)

2011-4-20 13:36, 下载次数: 0

TweenLite缓动类.rar (76.93 KB)

2011-4-20 13:36, 下载次数: 0

作者: kaba47   发布时间: 2011-04-20

求教哦~~~~~~~~~

作者: kaba47   发布时间: 2011-04-20

如果时间间隔小于200毫秒,就让图片以目标点(target_x 和target_y)5倍的距离进行缓动
你这个应该是控制移动时间来得到效果的,并不是控制目标点

作者: libins   发布时间: 2011-04-20

因为是由mouseMove来替代startDrag()的功能,我得判断鼠标,获得目标点的位置,带动图片在当前鼠标按下时的位置开始移动,直到到达目标点停止 。
如果是时间来控制,那mouseMove就没作用了,之前我考虑的是全部由mouseUp的时候来判断鼠标移动的距离来控制缓动的快慢,但这种效果就不好了,鼠标移动的过程中,图片是不动的,只当mouseUp判断后才移动图片。


而我现在要实现的效果是鼠标按下移动过程中,图片跟着缓动,鼠标弹起时mouseMove事件失效(该功能已经实现)。当鼠标按下并快速划动后弹起时(比如是<200毫秒),缓动的距离要比正常拖动时缓动的距离大得多(功能代码有点问题,tweenlite之间貌似有冲突)

举个例子吧,比如舞台宽度为500像素,图片宽度为4000像素,我每次鼠标按下,划动鼠标时,图片跟着缓动的路程最大也就500像素,而如果鼠标按下快速划动并弹起时,图片移动的路程就能大于500像素,或是直接能运行到图片的另一端了

[ 本帖最后由 kaba47 于 2011-4-20 17:23 编辑 ]

作者: kaba47   发布时间: 2011-04-20