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

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的作用是让目标动作缓慢中止