From 8385225c5d198feb05750d561dbd0a93bc4c9296 Mon Sep 17 00:00:00 2001 From: zhl Date: Mon, 25 Feb 2019 17:36:42 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=A7=E5=9B=BE=E8=BD=AE?= =?UTF-8?q?=E6=92=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/resources/prefabs/img_swiper.prefab | 370 ++++++++++++++++++++- assets/scripts/img_swiper.js | 89 ++++- 2 files changed, 439 insertions(+), 20 deletions(-) diff --git a/assets/resources/prefabs/img_swiper.prefab b/assets/resources/prefabs/img_swiper.prefab index 9613180..9a2d113 100644 --- a/assets/resources/prefabs/img_swiper.prefab +++ b/assets/resources/prefabs/img_swiper.prefab @@ -27,17 +27,23 @@ }, { "__id__": 11 + }, + { + "__id__": 15 + }, + { + "__id__": 19 } ], "_active": true, "_level": 1, "_components": [ { - "__id__": 17 + "__id__": 25 } ], "_prefab": { - "__id__": 18 + "__id__": 26 }, "_opacity": 255, "_color": { @@ -186,6 +192,210 @@ "fileId": "3206pHeSJH25Pu5zTD4rJo", "sync": false }, + { + "__type__": "cc.Node", + "_name": "001", + "_objFlags": 0, + "_parent": { + "__id__": 1 + }, + "_children": [], + "_active": true, + "_level": 2, + "_components": [ + { + "__id__": 6 + } + ], + "_prefab": { + "__id__": 7 + }, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 750, + "height": 1161 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_position": { + "__type__": "cc.Vec3", + "x": -750, + "y": 13, + "z": 0 + }, + "_scale": { + "__type__": "cc.Vec3", + "x": 1, + "y": 1, + "z": 1 + }, + "_rotationX": 0, + "_rotationY": 0, + "_quat": { + "__type__": "cc.Quat", + "x": 0, + "y": 0, + "z": 0, + "w": 1 + }, + "_skewX": 0, + "_skewY": 0, + "_zIndex": 0, + "groupIndex": 0, + "_id": "" + }, + { + "__type__": "cc.Sprite", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 5 + }, + "_enabled": true, + "_srcBlendFactor": 770, + "_dstBlendFactor": 771, + "_spriteFrame": { + "__uuid__": "4fb115d2-58e4-4b9b-badd-a26ca28a7f78" + }, + "_type": 0, + "_sizeMode": 0, + "_fillType": 0, + "_fillCenter": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_fillStart": 0, + "_fillRange": 0, + "_isTrimmedMode": true, + "_state": 0, + "_atlas": null, + "_id": "" + }, + { + "__type__": "cc.PrefabInfo", + "root": { + "__id__": 1 + }, + "asset": { + "__uuid__": "9c00729f-1f46-4905-a9e1-bc0e74feb37c" + }, + "fileId": "85E5UZo7hNDIacG5+ORmsl", + "sync": false + }, + { + "__type__": "cc.Node", + "_name": "003", + "_objFlags": 0, + "_parent": { + "__id__": 1 + }, + "_children": [], + "_active": true, + "_level": 2, + "_components": [ + { + "__id__": 9 + } + ], + "_prefab": { + "__id__": 10 + }, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 750, + "height": 1161 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_position": { + "__type__": "cc.Vec3", + "x": 750, + "y": 13, + "z": 0 + }, + "_scale": { + "__type__": "cc.Vec3", + "x": 1, + "y": 1, + "z": 1 + }, + "_rotationX": 0, + "_rotationY": 0, + "_quat": { + "__type__": "cc.Quat", + "x": 0, + "y": 0, + "z": 0, + "w": 1 + }, + "_skewX": 0, + "_skewY": 0, + "_zIndex": 0, + "groupIndex": 0, + "_id": "" + }, + { + "__type__": "cc.Sprite", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 8 + }, + "_enabled": true, + "_srcBlendFactor": 770, + "_dstBlendFactor": 771, + "_spriteFrame": { + "__uuid__": "fcbed040-f45d-4fe3-8c6a-1dadd55aee22" + }, + "_type": 0, + "_sizeMode": 0, + "_fillType": 0, + "_fillCenter": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_fillStart": 0, + "_fillRange": 0, + "_isTrimmedMode": true, + "_state": 0, + "_atlas": null, + "_id": "" + }, + { + "__type__": "cc.PrefabInfo", + "root": { + "__id__": 1 + }, + "asset": { + "__uuid__": "9c00729f-1f46-4905-a9e1-bc0e74feb37c" + }, + "fileId": "83Q8Za8eFB8rdVssFCys9w", + "sync": false + }, { "__type__": "cc.Node", "_name": "arrow_right", @@ -198,11 +408,14 @@ "_level": 4, "_components": [ { - "__id__": 6 + "__id__": 12 + }, + { + "__id__": 13 } ], "_prefab": { - "__id__": 7 + "__id__": 14 }, "_opacity": 255, "_color": { @@ -254,7 +467,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 5 + "__id__": 11 }, "_enabled": true, "_srcBlendFactor": 770, @@ -277,6 +490,59 @@ "_atlas": null, "_id": "" }, + { + "__type__": "cc.Button", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 11 + }, + "_enabled": true, + "transition": 0, + "pressedColor": { + "__type__": "cc.Color", + "r": 211, + "g": 211, + "b": 211, + "a": 255 + }, + "hoverColor": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "duration": 0.1, + "zoomScale": 1.2, + "clickEvents": [], + "_N$interactable": true, + "_N$enableAutoGrayEffect": false, + "_N$normalColor": { + "__type__": "cc.Color", + "r": 214, + "g": 214, + "b": 214, + "a": 255 + }, + "_N$disabledColor": { + "__type__": "cc.Color", + "r": 124, + "g": 124, + "b": 124, + "a": 255 + }, + "_N$normalSprite": null, + "_N$pressedSprite": null, + "pressedSprite": null, + "_N$hoverSprite": null, + "hoverSprite": null, + "_N$disabledSprite": null, + "_N$target": { + "__id__": 11 + }, + "_id": "" + }, { "__type__": "cc.PrefabInfo", "root": { @@ -300,11 +566,14 @@ "_level": 4, "_components": [ { - "__id__": 9 + "__id__": 16 + }, + { + "__id__": 17 } ], "_prefab": { - "__id__": 10 + "__id__": 18 }, "_opacity": 255, "_color": { @@ -356,7 +625,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 8 + "__id__": 15 }, "_enabled": true, "_srcBlendFactor": 770, @@ -379,6 +648,59 @@ "_atlas": null, "_id": "" }, + { + "__type__": "cc.Button", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 15 + }, + "_enabled": true, + "transition": 0, + "pressedColor": { + "__type__": "cc.Color", + "r": 211, + "g": 211, + "b": 211, + "a": 255 + }, + "hoverColor": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "duration": 0.1, + "zoomScale": 1.2, + "clickEvents": [], + "_N$interactable": true, + "_N$enableAutoGrayEffect": false, + "_N$normalColor": { + "__type__": "cc.Color", + "r": 214, + "g": 214, + "b": 214, + "a": 255 + }, + "_N$disabledColor": { + "__type__": "cc.Color", + "r": 124, + "g": 124, + "b": 124, + "a": 255 + }, + "_N$normalSprite": null, + "_N$pressedSprite": null, + "pressedSprite": null, + "_N$hoverSprite": null, + "hoverSprite": null, + "_N$disabledSprite": null, + "_N$target": { + "__id__": 15 + }, + "_id": "" + }, { "__type__": "cc.PrefabInfo", "root": { @@ -399,18 +721,18 @@ }, "_children": [ { - "__id__": 12 + "__id__": 20 } ], "_active": true, "_level": 4, "_components": [ { - "__id__": 15 + "__id__": 23 } ], "_prefab": { - "__id__": 16 + "__id__": 24 }, "_opacity": 255, "_color": { @@ -462,18 +784,18 @@ "_name": "btn_title_4", "_objFlags": 0, "_parent": { - "__id__": 11 + "__id__": 19 }, "_children": [], "_active": true, "_level": 4, "_components": [ { - "__id__": 13 + "__id__": 21 } ], "_prefab": { - "__id__": 14 + "__id__": 22 }, "_opacity": 255, "_color": { @@ -525,7 +847,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 12 + "__id__": 20 }, "_enabled": true, "_srcBlendFactor": 770, @@ -564,7 +886,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 11 + "__id__": 19 }, "_enabled": true, "_srcBlendFactor": 770, @@ -606,6 +928,22 @@ "__id__": 1 }, "_enabled": true, + "leftBtn": { + "__id__": 15 + }, + "rightBtn": { + "__id__": 11 + }, + "currentNode": { + "__id__": 2 + }, + "leftNode": { + "__id__": 5 + }, + "rightNode": { + "__id__": 8 + }, + "currentIdx": 2, "_id": "" }, { diff --git a/assets/scripts/img_swiper.js b/assets/scripts/img_swiper.js index 629c409..a5f02d2 100644 --- a/assets/scripts/img_swiper.js +++ b/assets/scripts/img_swiper.js @@ -2,17 +2,98 @@ cc.Class({ extends: cc.Component, properties: { - + leftBtn: { + default: null, + type: cc.Node + }, + rightBtn: { + default: null, + type: cc.Node + }, + currentNode: { + default: null, + type: cc.Node + }, + leftNode: { + default: null, + type: cc.Node + }, + rightNode: { + default: null, + type: cc.Node + }, + currentIdx: 2, + scrolling: false }, // LIFE-CYCLE CALLBACKS: - onLoad () { - + onLoad() { + let self = this; + this.leftBtn.on('click', () => { + if (!self.scrolling) { + self.scrolling = true; + this.moveLeft(); + } + }); + this.rightBtn.on('click', () => { + if (!self.scrolling) { + self.scrolling = true; + self.moveRight(); + } + }) }, - start () { + start() { }, // update (dt) {}, + moveLeft: function () { + let self = this; + let moveFinish = cc.callFunc(function () { + self.currentIdx ++; + if (self.currentIdx > 4) { + self.currentIdx = 0; + } + let nextIdx = self.currentIdx === 4 ? 0 : self.currentIdx + 1; + let tmp = self.leftNode; + self.leftNode = self.currentNode; + self.currentNode = self.rightNode; + self.rightNode = tmp; + let url = 'textures/part4/00' + nextIdx; + cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) { + self.rightNode.getComponent(cc.Sprite).spriteFrame = spriteFrame; + }); + self.scrolling = false; + }, this, {}); + let moveCurrent = cc.moveTo(0.5, -750, 13); + var seq = cc.sequence(moveCurrent, moveFinish); + self.currentNode.runAction(seq); + self.rightNode.runAction(cc.moveTo(0.5, 0, 13)); + self.leftNode.position = cc.v2(750, 13); + }, + moveRight: function () { + let self = this; + let moveFinish = cc.callFunc(function () { + self.currentIdx --; + if (self.currentIdx < 0) { + self.currentIdx = 4; + } + let nextIdx = self.currentIdx === 0 ? 4 : self.currentIdx - 1; + self.rightNode.position = cc.v2(-750, 13); + let tmp = self.rightNode; + self.rightNode = self.currentNode; + self.currentNode = self.leftNode; + self.leftNode = tmp; + let url = 'textures/part4/00' + nextIdx; + cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) { + self.leftNode.getComponent(cc.Sprite).spriteFrame = spriteFrame; + }); + self.scrolling = false; + }, this, {}); + let moveCurrent = cc.moveTo(0.5, 750, 13); + var seq = cc.sequence(moveCurrent, moveFinish); + self.currentNode.runAction(seq); + self.leftNode.runAction(cc.moveTo(0.5, 0, 13)); + } });