CocosCreator搓牌特效，可上下左右搓牌

cc.Class({ name: 'cc.PeekCard', extends: cc.Component, properties: { pokerBottom: cc.Node, pokerMask: cc.Mask, bgMask: cc.Mask, bgNode: cc.Node, bgShadow: cc.Sprite, // 阴影 pokerShadow: cc.Sprite, pokerAtlas: cc.SpriteAtlas, spriteFrameList: [cc.SpriteFrame], // 遮罩 shadowSpriteFrameList: [cc.SpriteFrame], // 横竖阴影 _poker: null, //当前卡牌节点 _direction: 0, //card滑动的方向，0表示不滑动，1表示上滑，-1表示下滑, 2表示右滑，-2表示左滑。 _sensitive: 10, //灵敏度的阀值,默认为10 _canFanPai: false, // 是否达到翻牌的要求 _isTouch: true, // 是否开启触摸 _isRollback: false, // 是否回滚到了初始状态 _isDone: false, // 翻拍动作是否完成 _startPos: null, _offPos: 0 }, init: function(pukeId) { for (var i = 0; i < this.pokerMask.node.childrenCount; i++) { var node = this.pokerMask.node.children[i]; node.active = false; if (i > 0) { this.pokerMask.node.removeChild(node); } } if (this.poker) { this.poker.active = false; } this.bgNode.active = true; this._canFanPai = false; this._isDone = false; this._isTouch = true; this.pokerBottom.getChildByName('poker').getComponent(cc.Sprite).spriteFrame = this.pokerAtlas.getSpriteFrame(pukeId); var w = this.pokerBottom.width var h = this.pokerBottom.height this.nodeW = w; this.nodeH = h; this.pokerBottom.setPosition(0, h); this.pokerBottom.id = 'bottom'; var parent = this.pokerBottom.parent; this.pokerLeft = cc.instantiate(this.pokerBottom); this.pokerLeft.parent = parent; this.pokerLeft.setPosition(-w, 0); this.pokerLeft.id = 'left'; this.pokerRight = cc.instantiate(this.pokerBottom); this.pokerRight.parent = parent; this.pokerRight.getChildByName('poker').angle = -90; this.pokerRight.setPosition(w, 0); this.pokerRight.id = 'right'; this.pokerTop = cc.instantiate(this.pokerBottom); this.pokerTop.parent = parent; this.pokerTop.getChildByName('poker').angle = -90; this.pokerTop.setPosition(0, -h); this.pokerTop.id = 'top'; }, // use this for initialization onLoad: function () { this.node.on(cc.Node.EventType.TOUCH_START, this.onStart, this) this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onMove, this) this.node.on(cc.Node.EventType.TOUCH_END, this.onEnd, this) this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onCancel, this) }, onStart: function (event) { this._isRollback = false this._direction = 0;//把方向状态改为0 this._startPos = event.touch.getLocation() }, hideOthers(id) { for (var i = 0; i < this.pokerMask.node.childrenCount; i++) { var node = this.pokerMask.node.children[i]; if (node.id == id) continue; node.active = false; } }, onMove: function (event) { if (this._isTouch == false) return // 是否禁用触摸 this._isRollback = false var pos = event.touch.getLocation() var y = pos.y - this._startPos.y var x = pos.x - this._startPos.x if (this._direction == 0) { if (pos.y - this._startPos.y > this._sensitive) { //上滑 this._direction = 1; this.hideOthers('bottom'); this.poker = this.pokerBottom; this.poker.setPosition(0, -this.nodeH); } else if (pos.y - this._startPos.y < -this._sensitive) { //下滑 this._direction = -1; this.hideOthers('top'); this.poker = this.pokerTop; this.poker.setPosition(0, this.nodeH); } else if (pos.x - this._startPos.x > this._sensitive) { //右滑 this._direction = 2; this.hideOthers('left'); this.poker = this.pokerLeft; this.poker.setPosition(-this.nodeW, 0); } else if (pos.x - this._startPos.x < -this._sensitive) { //左滑 this._direction = -2; this.hideOthers('right'); this.poker = this.pokerRight; this.poker.setPosition(this.nodeW, 0); } else { this.poker = null; } } if (!this.poker) return; var mask = (Math.abs(this._direction) == 1) ? this.pokerMask.node.getPosition().y : this.pokerMask.node.getPosition().x var limit = (Math.abs(this._direction) == 1) ? 450 : 600 if (Math.abs(mask) > limit) { this._canFanPai = true this.openAnimation() // 达到指定位置，开牌 return } else this._canFanPai = false if (Math.abs(this._direction) == 1) { this.updatePosition(y) } else { this.updatePosition(x) } this._startPos = pos this.poker.active = true; }, onEnd: function (evt) { if (this._canFanPai == false) { // 结束触摸事件时，如果没触发翻牌事件，则回滚到初始状态 this._isRollback = (this.pokerMask.node.getPosition().y != 0 || this.pokerMask.node.getPosition().x != 0) // 开启回滚定时器 } }, onCancel: function (evt) { if (this._canFanPai == false) { // 结束触摸事件时，如果没触发翻牌事件，则回滚到初始状态 this._isRollback = true // 开启回滚定时器 } }, updatePosition: function (val) { if (!this.poker) return; this._offPos += val this._offPos = this._offPos < 0 ? 0 : this._offPos var mask = Math.abs(this._direction) == 1 ? this.pokerMask.node.getPosition().y : this.pokerMask.node.getPosition().x var ratio = this.getScaleRatio(mask) // 缩放比例 var opacity = this.getOpacity(mask) this.bgShadow.node.opacity = opacity this.pokerShadow.node.opacity = opacity if (Math.abs(mask) > 30) { if (Math.abs(this._direction) == 1) { this.pokerMask.spriteFrame = this.spriteFrameList[0] this.bgMask.spriteFrame = this.spriteFrameList[0] } else { this.pokerMask.spriteFrame = this.spriteFrameList[2] this.bgMask.spriteFrame = this.spriteFrameList[2] } } else { this.pokerMask.spriteFrame = this.spriteFrameList[1] this.bgMask.spriteFrame = this.spriteFrameList[1] } if (Math.abs(this._direction) == 1) { this.pokerMask.node.setScale(ratio, 1) this.pokerShadow.node.setScale(ratio, 1) if (this._direction > 0 ? this.pokerMask.node.getPosition().y < 0 : this.pokerMask.node.getPosition().y > 0) { this.pokerMask.node.y = 0 this._isRollback = false if (this._isRollback) { this.poker.active = false; } } else { this.pokerMask.node.y += val } if (this._direction > 0 && this.poker.getPosition().y < -this.nodeH) { this.poker.y = -this.nodeH } else if (this._direction < 0 && this.poker.getPosition().y > this.nodeH) { this.poker.y = this.nodeH } else { this.poker.y += val } if (this._direction > 0 ? this.bgMask.node.getPosition().y < 0 : this.bgMask.node.getPosition().y > 0) { this.bgMask.node.y = 0 } else { this.bgMask.node.y += val } if (this._direction > 0 ? this.bgNode.getPosition().y > 0 : this.bgNode.getPosition().y < 0) { this.bgNode.y = 0 } else { this.bgNode.y -= val } if (this._direction > 0 ? this.bgShadow.node.getPosition().y < 0 : this.bgShadow.node.getPosition().y > 0) { this.bgShadow.node.y = 0 } else { this.bgShadow.node.y += val * 1.6 } if (this._direction > 0 ? this.pokerShadow.node.getPosition().y < 0 : this.pokerShadow.node.getPosition().y > 0) { this.pokerShadow.node.y = 0 } else { this.pokerShadow.node.y += val } } else { this.pokerMask.node.setScale(1, ratio) this.pok