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

前端之家收集整理的这篇文章主要介绍了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的作用是让目标动作缓慢中止 原文链接:/cocos2dx/339843.html

猜你在找的Cocos2d-x相关文章