循环滚动翻页+居中项缩放
实现如图所示的循环滚动，并且居中项有放大效果
整体思路，可视区n个，实际1+n+1个，左右两侧各自多一个。监听TOUCH_MOVE事件。
//定义值 private _touchGroup: eui.Group; private _gpTitle1: eui.Group; private _gpTitle2: eui.Group; private _gpTitle3: eui.Group; private _gpTitle4: eui.Group; private _gpTitle5: eui.Group; private _title1: eui.Image; private _title2: eui.Image; private _title3: eui.Image; private _title4: eui.Image; private _title5: eui.Image; private _kuang1: eui.Image; private _kuang2: eui.Image; private _kuang3: eui.Image; private _kuang4: eui.Image; private _kuang5: eui.Image; private _choose1: eui.Image; private _choose2: eui.Image; private _choose3: eui.Image; private _choose4: eui.Image; private _choose5: eui.Image; private _scrollerData: TitleListItem[]; private _scrollerDataIndexMap: {}; private _titleIdCenter: number; private _posX1: number = -190; private _posX2: number = 0; private _posX3: number = 195; private _posX4: number = 467; private _posX5: number = 657;//初始位置 private spacingLeft: number = 195;//2和3的间距 private spacingRight: number = 272;//3和4的间距 private spacingY: number = 22;//y高低间距 private spacingX: number = 4;//x两项最小间距 private bigY: number = 2;//中间项y位置 private smallY: number = 24;//其他项y位置 private itemWidth: number = 266; private bigScal = 1; private spacingScale: number = 0.3; private smallScal = 0.7; private _titleIdCenterIndex: number = 0; private touchFromBegin: boolean; private endTouch: boolean = true; private startX: number; private moveX: number = 0; private direc: number;//移动的方向 private dataList: number[][];//位置 缩放数据 //监听事件 this._gpTitle1.addEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._gpTitle2.addEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._gpTitle3.addEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._gpTitle4.addEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._gpTitle5.addEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._touchGroup.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onBeginHandler, this); this._touchGroup.addEventListener(egret.TouchEvent.TOUCH_CANCEL, this.onEndMoveHandler, this); this._touchGroup.addEventListener(egret.TouchEvent.TOUCH_RELEASE_OUTSIDE, this.onEndMoveHandler, this); this._touchGroup.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.onMoveHandler, this); this._touchGroup.addEventListener(egret.TouchEvent.TOUCH_END, this.onEndMoveHandler, this); //关闭界面记得移除 this._gpTitle1.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._gpTitle2.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._gpTitle3.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._gpTitle4.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._gpTitle5.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.touchTap, this); this._touchGroup.removeEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onBeginHandler, this); this._touchGroup.removeEventListener(egret.TouchEvent.TOUCH_CANCEL, this.onEndMoveHandler, this); this._touchGroup.removeEventListener(egret.TouchEvent.TOUCH_RELEASE_OUTSIDE, this.onEndMoveHandler, this); this._touchGroup.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.onMoveHandler, this); this._touchGroup.removeEventListener(egret.TouchEvent.TOUCH_END, this.onEndMoveHandler, this); //点击左右两项翻页的方法 protected touchTap(evt: egret.TouchEvent): void { if (!this.endTouch) return; let titleId = evt.currentTarget['_titleId']; //点击的左右两项执行翻页 if (this._model.selectId != titleId) { if (evt.currentTarget.x == this._posX2) { this.direc = TitleConst.TOUCH_TO_RIGHT; evt.currentTarget.x += 1;//为了touchEnd方法的判断 if (evt.currentTarget == this._gpTitle1) { this._gpTitle2.x += 1; this._gpTitle4.x = this._gpTitle5.x;//将最左/右项设置到下一个位置 } else if (evt.currentTarget == this._gpTitle2) { this._gpTitle3.x += 1; this._gpTitle5.x = this._gpTitle1.x; } else if (evt.currentTarget == this._gpTitle3) { this._gpTitle4.x += 1; this._gpTitle1.x = this._gpTitle2.x; } else if (evt.currentTarget == this._gpTitle4) { this._gpTitle5.x += 1; this._gpTitle2.x = this._gpTitle3.x; } else if (evt.currentTarget == this._gpTitle5) { this._gpTitle1.x += 1; this._gpTitle3.x = this._gpTitle4.x; } } else if (evt.currentTarget.x == this._posX4) { this.direc = TitleConst.TOUCH_TO_LEFT; evt.currentTarget.x -= 1; if (evt.currentTarget == this._gpTitle1) { this._gpTitle5.x -= 1; this._gpTitle3.x = this._gpTitle2.x; } else if (evt.currentTarget == this._gpTitle2) { this._gpTitle1.x -= 1; this._gpTitle4.x = this._gpTitle3.x; } else if (evt.currentTarget == this._gpTitle3) { this._gpTitle2.x -= 1; this._gpTitle5.x = this._gpTitle4.x; } else if (evt.currentTarget == this._gpTitle4) { this._gpTitle3.x -= 1; this._gpTitle1.x = this._gpTitle5.x; } else if (evt.currentTarget == this._gpTitle5) { this._gpTitle4.x -= 1; this._gpTitle2.x = this._gpTitle1.x; } } this.dataList = []; this.dataList[1] = []; this.dataList[2] = []; this.dataList[3] = []; this.dataList[4] = []; this.dataList[5] = []; this.onEndMoveHandler(evt); } } //拖动翻页的方法 private onBeginHandler(evt: egret.TouchEvent) { //设置初始位置 if (!this.endTouch) return; this.endTouch = false; this.startX = evt.stageX; this.touchFromBegin = true; this.moveX = 0; this.dataList = []; this.dataList[1] = []; this.dataList[2] = []; this.dataList[3] = []; this.dataList[4] = []; this.dataList[5] = []; } private onMoveHandler(evt: egret.TouchEvent) { if (!this.touchFromBegin) return; if (!(this._touchGroup.hitTestPoint(evt.stageX, evt.stageY))) { this.onEndMoveHandler(evt); return; } this.moveX = (evt.stageX - this.startX) / 2; if (Math.abs(this.moveX) > this.itemWidth / 4) { if (this.moveX < 0) { this.moveX = -this.itemWidth / 4; } else { this.moveX = this.itemWidth / 4; } } this.startX = evt.stageX; for (let k: number = 1; k <= 5; k++) { this['_gpTitle' + k].x += this.moveX; } //移动方向 if (this.moveX < 0 && this.direc != TitleConst.TOUCH_TO_LEFT) { this.direc = TitleConst.TOUCH_TO_LEFT; } else if (this.moveX > 0 && this.direc != TitleConst.TOUCH_TO_RIGHT) { this.direc = TitleConst.TOUCH_TO_RIGHT; } for (let k: number = 1; k <= 5; k++) { //判断边界 if (this.direc == TitleConst.TOUCH_TO_RIGHT) { if (this['_gpTitle' + k].x > this._posX5) { let nextK = k + 1; if (nextK == 6) { nextK = 1; } this['_gpTitle' + k].x = this['_gpTitle' + nextK].x - this.spacingX - this['_gpTitle' + k].scaleX * this['_gpTitle' + k].width; } if (this['_gpTitle' + k].x > this._posX2 && this['_gpTitle' + k].x < this._posX3) { let nextK = k + 1; if (nextK == 6) { nextK = 1; } let rX = (this['_gpTitle' + k].x + this['_gpTitle' + k].width * this['_gpTitle' + k].scaleX) + this.spacingX; if (rX > this['_gpTitle' + nextK].x) { this['_gpTitle' + nextK].x = rX; } let percent = (this['_gpTitle' + k].x - this._posX2) / this.spacingLeft; this['_gpTitle' + k].y = this.smallY - this.spacingY * percent; let scale = this['_gpTitle' + k].scaleY; this['_gpTitle' + k].scaleY = this['_gpTitle' + k].scaleX = this.smallScal + this.spacingScale * percent; if (this['_gpTitle' + k].y < this.bigY) { this['_gpTitle' + k].y = this.bigY; } if (this['_gpTitle' + k].scaleY > this.bigScal) { this['_gpTitle' + k].scaleY = this['_gpTitle' + k].scaleX = this.bigScal; } } if (this['_gpTitle' + k].x > this._posX3 && this['_gpTitle' + k].x < this._posX4) { let percent = (this['_gpTitle' + k].x - this._posX3) / this.spacingRight; this['_gpTitle' + k].y = this.bigY + this.spacingY * percent; this['_gpTitle' + k].scaleY = this['_gpTitle' + k].scaleX = this.bigScal - this.spacingScale * percent; if (this['_gpTitle' + k].y > this.smallY) { this['_gpTitle' + k].y = this.smallY; } if (this['_gpTitle' + k].scaleY < this.smallScal) { this['_gpTitle' + k].scaleY = this['_gpTitle' + k].scaleX = this.smallScal; } } } if (this.direc == TitleConst.TOUCH_TO_LEFT) { if (this['_gpTitle' + k].x < this._posX1) { let nextK = k - 1; if (nextK == 0) { nextK = 5; } this['_gpTitle' + k].x = this['_gpTitle' + nextK].x + this['_gpTitle' + nextK].width * this['_gpTitle' + nextK].scaleX + this.spacingX; } //缩放 y位置 if (this['_gpTitle' + k].x < this._posX4 && this['_gpTitle' + k].x > this._posX3) { let nextK = k + 1; if (nextK == 6) { nextK = 1; } let rX = (this['_gpTitle' + k].x + this['_gpTitle' + k].width * this['_gpTitle' + k].scaleX) + this.spacingX; if (rX > this['_gpTitle' + nextK].x) { this['_gpTitle' + k].x -= rX - this['_gpTitle' + nextK].x; } let percent = (this._posX4 - this['_gpTitle' + k].x) / this.spacingRight; this['_gpTitle' + k].y = this.smallY - this.spacingY * percent; let scale = this['_gpTitle' + k].scaleY; this['_gpTitle' + k].scaleY = this['_gpTitle' + k].scaleX = this.smallScal + this.spacingScale * percent; if (this['_gpTitle' + k].y < this.bigY) { this['_gpTitle' + k].y = this.bigY; } if (this['_gpTitle' + k].scaleY > this.bigScal) { this['_gpTitle' + k].scaleY = this['_gpTitle' + k].scaleX = this.bigScal; } } if (this['_gpTitle' + k].x < this._posX3 && this['_gpTitle' + k].x > this._posX2) { let percent = (this._posX3 - this['_gpTitle' + k].x) / this.spacingLeft; this['_gpTitle' + k].y = this.bigY + this.spacingY * percent; this['_gpTitle' + k].scaleY = this['_gpTitle' + k].scaleX = this.bigScal - this.spacingScale * percent; if (this['_gpTitle' + k].y > this.smallY) { this['_gpTitle' + k].y = this.smallY; } if (this['_gpTitle' + k].scaleY < this.smallScal) { this['_gpTitle' + k].scaleY = this['_gpTitle' + k].scaleX = this.smallScal; } } } } } private onEndMoveHandler(evt: egret.TouchEvent) { this.touchFromBegin = false; this.endTouch = false; if (this.direc == TitleConst.TOUCH_TO_LEFT) { for (let k: number = 1; k <= 5; k++) { if (this['_gpTitle' + k].x < this._posX4 && this['_gpTitle' + k].x > this._posX3) { //中间位置 this.dataList[k] = [this._posX3, this.bigY, this.bigScal]; this._model.selectId = this['_gpTitle' + k]['titleId']; } if (this['_gpTitle' + k].x < this._posX3 && this['_gpTitle' + k].x > this._posX2) { //左边位置 this.dataList[k] = [this._posX2, this.smallY, this.smallScal]; let nextK = k - 1; if (nextK == 0) { nextK = 5; } this.dataList[nextK] = [this._posX1, this.smallY, this.smallScal]; nextK = nextK - 1; if (nextK == 0) { nextK = 5; } this.dataList[nextK] = [this._posX5, this.smallY, this.smallScal]; nextK = nextK - 1; if (nextK == 0) { nextK = 5; } this.dataList[nextK] = [this._posX4, this.smallY, this.smallScal]; } } } else if (this.direc == TitleConst.TOUCH_TO_RIGHT) { for (let k: number = 1; k <= 5; k++) { if (this['_gpTitle' + k].x > this._posX2 && this['_gpTitle' + k].x < this._posX3) { //中间位置 this.dataList[k] = [this._posX3, this.bigY, this.bigScal]; this._model.selectId = this['_gpTitle' + k]['titleId']; } if (this['_gpTitle' + k].x > this._posX3 && this['_gpTitle' + k].x < this._posX4) { //右边位置 this.dataList[k] = [this._posX4, this.smallY, this.smallScal]; let nextK = k + 1; if (nextK == 6) { nextK = 1; } this.dataList[nextK] = [this._posX5, this.smallY, this.smallScal]; nextK = nextK + 1; if (nextK == 6) { nextK = 1; } this.dataList[nextK] = [this._posX1, this.smallY, this.smallScal]; nextK = nextK + 1; if (nextK == 6) { nextK = 1; } this.dataList[nextK] = [this._posX2, this.smallY, this.smallScal]; } } } let _data = this.dataList; if (!_data[1] || !_data[1][1]) { this.endTouch = true; return; } egret.Tween.removeTweens(this._gpTitle1); egret.Tween.removeTweens(this._gpTitle2); egret.Tween.removeTweens(this._gpTitle3); egret.Tween.removeTweens(this._gpTitle4); egret.Tween.removeTweens(this._gpTitle5); egret.Tween.get(this._gpTitle1).to({ x: _data[1][0], y: _data[1][1], scaleX: _data[1][2], scaleY: _data[1][2] }, 300) egret.Tween.get(this._gpTitle2).to({ x: _data[2][0], y: _data[2][1], scaleX: _data[2][2], scaleY: _data[2][2] }, 300); egret.Tween.get(this._gpTitle3).to({ x: _data[3][0], y: _data[3][1], scaleX: _data[3][2], scaleY: _data[3][2] }, 300); egret.Tween.get(this._gpTitle4).to({ x: _data[4][0], y: _data[4][1], scaleX: _data[4][2], scaleY: _data[4][2] }, 300); egret.Tween.get(this._gpTitle5).to({ x: _data[5][0], y: _data[5][1], scaleX: _data[5][2], scaleY: _data[5][2] }, 300).call( () => { this._model.dispatchEvent(new TitleEvent(TitleEvent.SELECT_TITLE));//这里翻页完毕后抛个事件，刷新选中项的数据 this.endTouch = true; }, this); this.direc = 0; } //监听事件 this._model.addEventListener(TitleEvent.SELECT_TITLE, this.___onSelectTitle, this); //刷新选中项 private ___onSelectTitle(): void { this.setTitleId(); this.changeCardImg(); this._title.source = this._cvo.getCvo(this._titleIdCenter).getTitleImg(); this.changeBtnState(); this.updateTime(); Manager.render.remove(this.updateTime, this); Manager.render.add(this.updateTime, this, 1000, 0); this.changeAttr(); console.log('当前选中称号id ' + this._titleIdCenter); } private setTitleId(): void { let idx = this._scrollerDataIndexMap[this._model.selectId] - 1; this._titleIdCenter = this._model.selectId; this._titleIdCenterIndex = idx; } private changeCardImg(): void { let idx = this._scrollerDataIndexMap[this._model.selectId] - 1; this._titleIdCenter = this._model.selectId; this._titleIdCenterIndex = idx; for (let k: number = 1; k <= 5; k++) { if (Math.abs(this['_gpTitle' + k].x - this._posX1) <= 30) { let __titleIdCenterIndex = this.getCardIndex(this._titleIdCenterIndex - 2); this.setTitleImg(k, this._scrollerData[__titleIdCenterIndex].id, false); } else if (Math.abs(this['_gpTitle' + k].x - this._posX2) <= 30) { let __titleIdCenterIndex = this.getCardIndex(this._titleIdCenterIndex - 1); this.setTitleImg(k, this._scrollerData[__titleIdCenterIndex].id, false); } else if (Math.abs(this['_gpTitle' + k].x - this._posX3) <= 30) { let __titleIdCenterIndex = this.getCardIndex(this._titleIdCenterIndex); this.setTitleImg(k, this._scrollerData[__titleIdCenterIndex].id, true); } else if (Math.abs(this['_gpTitle' + k].x - this._posX4) <= 30) { let __titleIdCenterIndex = this.getCardIndex(this._titleIdCenterIndex + 1); this.setTitleImg(k, this._scrollerData[__titleIdCenterIndex].id, false); } else if (Math.abs(this['_gpTitle' + k].x - this._posX5) <= 30) { let __titleIdCenterIndex = this.getCardIndex(this._titleIdCenterIndex + 2); this.setTitleImg(k, this._scrollerData[__titleIdCenterIndex].id, false); } } }
