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

发布时间：2020-12-14 17:01:16 所属栏目：百科来源：网络整理

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!