循环滚动翻页+居中项缩放

 实现如图所示的循环滚动，并且居中项有放大效果

整体思路，可视区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);
            }
        }
    }