CocosCreator 区域滑动控制抖动 2021-09-21 技术,Cocos Creator 暂无评论 3980 次阅读 # 前言 用cocos creator 做一个控制节点移动区域的功能，通过监听**cc.Node.EventType.TOUCH_MOVE**实现，但是如果玩家滑动超过界限的时候，会出现越界又重新复位 抖动的情况。 <!--more--> 如图：（紫线是界限）  # 原因 代码实现是判断当前的节点**移动的坐标**是否已经超过了**界限坐标**，如果超过就将其置为界限坐标。 ```javascript _onTouchMove(touchEvent) { //偏移信息 var delta=touchEvent.getDelta(); // 转换坐标 let rang_up_pos = CommonFunc.getNodePos(this.range_up,this.node.parent); let rang_down_pos = CommonFunc.getNodePos(this.range_down,this.node.parent); //移动的上下限 let node_up = this.node.y + this.node.height/2; let node_down = this.node.y - this.node.height/2; if(node_up > rang_up_pos.y){ this.node.y = rang_up_pos.y - this.node.height/2; return; } if(node_down < rang_down_pos.y){ this.node.y = rang_down_pos.y + this.node.height/2; return; } this.node.y+=delta.y; } ``` 这样每次移动超出界限的时候，都会重新赋值节点到界限处，就造成了抖动的情况。 # 解决 抖动的原因其实是每次越界都强制设置回来导致的，修改代码如下： ```javascript _onTouchMove(touchEvent) { var delta=touchEvent.getDelta(); let rang_up_pos = CommonFunc.getNodePos(this.range_up,this.node.parent); let rang_down_pos = CommonFunc.getNodePos(this.range_down,this.node.parent); let node_up = this.node.y + this.node.height/2; let node_down = this.node.y - this.node.height/2; if(node_up > rang_up_pos.y){ if(delta.y < 0){ this.node.y = rang_up_pos.y - this.node.height/2; } return; } if(node_down < rang_down_pos.y){ if(delta.y > 0){ this.node.y = rang_down_pos.y + this.node.height/2; } return; } this.node.y+=delta.y; } ``` 移动的时候判断偏移方向，如果已经越界了，就不再重新设置坐标，等到下次向反方向移动的时候设置。 # 最后 这个方式也会有点问题，就是**在最后越界的一刻拖动特别大，就会造成节点事实越界的情况**，如图：  这种情况下，只有往下移动的瞬间，节点才会恢复到界限坐标。 标签: none 本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭