Cocos2d-js中实现惯性滑动效果

什么是惯性滑动效果呢?我们经常在手机上看到一种效果,拖着手机屏幕滑动,把手放开后,屏幕仍会因为惯性而滑动一段距离,这就是一种惯性滑动效果。现在的工作是做游戏研发,因此也少不了要实现这种效果,初步想了一下,有几种方案,当然,效果不太相同。
     方案如下:
            方案1: 手放开后,让屏幕固定滑动一段距离。(这种方案最为简单,但是视觉上过于死板)
            方案2: 预设一个滑动时间t,手放开后,让屏幕根据当前速度v乘以滑动时间T得到一段滑动距离s (s = v * t)。(这种方案较第                            一种方法好多了,但是还是看得很不爽)
           方案3:  预设一个加速度a,手放开后,让屏幕根据当前速度v做匀减速运动,直至速度为0。 (这种方案看上去最为舒服,有很明显                     的惯性效果)

    那么问题来了,具体怎么做匀减速直线运动呢? 
    我们先推一下我们需要的公式,然后再代码实现 。

    已知手放开的时候的屏幕滑动速度v,以及我们预设的加速度a;
    滑动时间t = v / a;
    滑动距离s = v * t + a * t * t / 2; 

    万事具备,只欠东风,接下来就开始coding吧。 

    假设开始滑动时,
          屏幕开始滑动的时间是beganTime,
          屏幕开始滑动时触摸的位置是beganLocation, 
          屏幕结束滑动的时间是endedTime,
          屏幕结束滑动触摸的位置是endedLocation,
          场景移动的节点是moveRoot,
          预设的加速度是a,
 

   程序中我们只做左右滑动处理,上下滑动可依此类推 


示例代码如下 :
var speed; // 屏幕结束滑动时的速度
var distance; // 屏幕惯性滑动的距离
var duration; // 屏幕惯性滑动需要的时间
var interval; // 屏幕开始触摸到结束触摸的时间间隔
var flag; // 屏幕向左或向右滑动的标志: 1 表示向右滑动, -1 表示向左滑动
var moveBy; // 动作moveBy
flag = 1; // 默认是向右滑动
interval = (endedTime - beganTime) / 1000; // 因为获取的时间的单位是毫秒,所以需要除以1000转化成秒
speed = (endedLocation.x - beganLocation.x) / interval; // 计算手放开时的速度
// 如果速度的值小于0,则说明是向左滑动
if (speed < 0) {
flag = -1;
}
// 因为速度有正负,所以计算滑动所需的时间时要对速度求绝对值
duration = Math.abs(speed) / a;
// 求滑动距离,同理,需要求绝对值
distance = Math.abs(speed) * interval - a * interval * interval / 2;
moveBy = cc.moveBy(duration, cc.p(distance * flag, 0));
// 让场景移动的节点做匀减速运动运动到目标位置
moveRoot.runAction(moveBy.easing(cc.easeExponentialOut())); // easeExponentialOut的作用是让目标动作缓慢中止

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值