请教一个鼠标移动速度控制图片移动快慢的问题(期待高人指点)
时间: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)
TweenLite缓动类.rar (76.93 KB)
第一种情况是:鼠标按下并拖动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 编辑 ]
附件

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

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 编辑 ]
如果是时间来控制,那mouseMove就没作用了,之前我考虑的是全部由mouseUp的时候来判断鼠标移动的距离来控制缓动的快慢,但这种效果就不好了,鼠标移动的过程中,图片是不动的,只当mouseUp判断后才移动图片。
而我现在要实现的效果是鼠标按下移动过程中,图片跟着缓动,鼠标弹起时mouseMove事件失效(该功能已经实现)。当鼠标按下并快速划动后弹起时(比如是<200毫秒),缓动的距离要比正常拖动时缓动的距离大得多(功能代码有点问题,tweenlite之间貌似有冲突)
举个例子吧,比如舞台宽度为500像素,图片宽度为4000像素,我每次鼠标按下,划动鼠标时,图片跟着缓动的路程最大也就500像素,而如果鼠标按下快速划动并弹起时,图片移动的路程就能大于500像素,或是直接能运行到图片的另一端了
[ 本帖最后由 kaba47 于 2011-4-20 17:23 编辑 ]
作者: kaba47 发布时间: 2011-04-20
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28