cocos2dx creator 创建类似gallery控件的循环效果

/**
 * Created by heXm on 2017/3/8.
 */

cc.Class({
    extends : cc.Component,
    properties:{
        itemGroup:{
            default:[],
            type:cc.Node
        },
        _sensitiveArg:{
            default:150,
            type:cc.Integer
        },
        _itemLen:3,
        _itemContent:[],
        _itemPosY:506,
        _roomType:0
    },

    onLoad:function () {
        this.initItemGroup();
        this.selectIdx = 1;
        this.addListeners();
    },

    initItemGroup:function () {
        let self = this;
        let url = 'prefab/listItem';
        let x = cc.winSize.width;
        let itemPosX = [
            x/10,
            x/2,
            x*9/10
        ];
        cc.loader.loadRes(url,function (err,prefab) {
            if(err){
                return 0;
            }
            for(let i=0;i<self._itemLen;i++){
                let item = cc.instantiate(prefab);
                item.parent = self.node;
                item.setPosition(cc.v2(itemPosX[i],self._itemPosY));
                self.itemGroup.push(item);
            }
            self.setItemIdx();
            self.addItemListeners();
        });
    },

    addListeners:function () {
        "use strict";
        this.node.on(cc.Node.EventType.TOUCH_START,this.onTouchStart,this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE,this.onTouchStart,this);
        this.node.on(cc.Node.EventType.TOUCH_END,this.onTouchStart,this);
    },

    addItemListeners:function () {
        let len  = this.itemGroup.length;
        for(let i=0;i<len;i++){
            this.itemGroup[i].on(cc.Node.EventType.TOUCH_END,this.onItemSelected,this);
        }
    },

    onItemSelected:function (e) {
        cc.log(e.target.idx);
    },


    enterGame:function () {
        let contentLen = this._itemContent.length;
        let idx = (this.getContentIdx()+1)%contentLen;
        let id = this._itemContent[idx][3];
        let game = null;
        for(let index in GameConfig.game_list){
            if(id == GameConfig.game_list[index].gameid){
                game = GameConfig.game_list[index];
            }
        }
        cc.log('game',id,game);
        if(!!game){
            let GameRoomName = {
                0:'normal',
                1:'normal',
                2:'card',
                3:'match'
            };
            let roomName = GameRoomName[this._roomType];
            require('LoadGame').loadGame(game,roomName);
        }
    },

    setItemIdx:function () {
        let len  = this.itemGroup.length;
        for(let i=0;i<len;i++){
            this.itemGroup[i].idx = i;
            if(i!==this.selectIdx){
                this.itemGroup[i].getComponent(cc.Animation).play('list_item',0.5);
            }
        }

        this.steps = 0;
        this.setItemContent();
    },

    onTouchStart:function (e) {
      switch (e.type){
          case 'touchstart':
              break;
          case 'touchend':
              let touch = e.getTouches()[0];
              let start = touch.getStartLocation();
              let current = touch.getLocation();
              let xDiff = start.x-current.x;
              if(xDiff>this._sensitiveArg){
                  this.scrollToLeft();
              }
              else if(xDiff<0-this._sensitiveArg){
                  this.scrollToRight();
              }
              break;
          case 'touchmove':
              break;
      }
    },

    onClose:function (e) {
       this.node.removeFromParent(true);
    },


    isLoadFinished:function () {
        return this.itemGroup.length===this._itemLen;
    },

    scrollToLeft:function () {
        if(typeof this.steps === 'undefined'){
            this.steps = 0;
        }
        if(!this.isLoadFinished()){
            return;
        }
        this.steps++;
        this.moveGroup(this.steps,false);
    },

    scrollToRight:function () {
        if(typeof this.steps === 'undefined'){
            this.steps = 0;
        }
        if(!this.isLoadFinished()){
            return;
        }
        this.steps--;
        this.moveGroup(this.steps,true);
    },



    test:function () {
       //this.moveGroup(Math.ceil(1000*Math.random()));
    },

    getPosByStep:function (step,i) {
        let x = cc.winSize.width;
            let xArr = {
                0:[0.1,0.9,0.5],
                1:[0.5,0.1,0.9],
                2:[0.9,0.5,0.1]
            };
        let pos = cc.v2(xArr[i][step]*x,this._itemPosY);
        return pos;
    },

    getGroupByStep:function (step) {
        let arr = [];
        //let len  = this.itemGroup.length;
        //let start = step%len;
        //arr.push(this.itemGroup[start],this.itemGroup[(start+1)%len],this.itemGroup[(start+2)%len]);
        arr.push(this.itemGroup[0],this.itemGroup[1],this.itemGroup[2]);
        return arr;
    },

    moveGroup:function (steps,isIn) {
        cc.log('steps',steps);
        let arr = this.getGroupByStep(steps);
        if(steps<0){
            steps = (this._itemLen -  Math.abs(steps%this._itemLen))%this._itemLen;
        }else {
            steps = Math.abs(steps%this._itemLen);
        }

        this.selectIdx = (steps+1)%this._itemLen;
        let move = isIn?this.moveIn:this.moveOut;
        for(let i=0;i<this._itemLen;i++){

            arr[i].stopAllActions();
            let pos = this.getPosByStep(steps,i);
            let idx = isIn?this.getMoveInIdx(steps,i):this.getMoveOutIdx(steps,i);
            if(isIn){
                if(idx!==-1){
                    move.bind(this)(steps,i,arr[i]);
                    this.showItemAnimation((this._itemLen+(idx-1))%this._itemLen,false);
                    this.showItemAnimation((this._itemLen+(idx-2))%this._itemLen,true);
                }
                else{
                    arr[i].runAction(cc.moveTo(0.5,pos));
                }
            }else{

                if(idx!==-1){
                    move.bind(this)(steps,i,arr[i]);
                    this.showItemAnimation((idx+1)%this._itemLen,false);
                    this.showItemAnimation((idx+2)%this._itemLen,true);
                }
                else{
                    arr[i].runAction(cc.moveTo(0.5,pos));
                }
            }

        }
    },

    getMoveInIdx:function (step,i) {
        if(step==i){
            return i;
        }
        return -1;
    },

    getMoveOutIdx:function (step,i) {
        let idx = (this._itemLen+(step-1))%this._itemLen;
        if(i===idx){
            return idx;
        }
        return -1;
    },


    moveIn:function (steps,i,item) {
        let pos = this.getPosByStep(steps,i);
        let startPos = this.getStartPos();
        let endPos = this.getEndPos();
        let self = this;
        item.runAction(
            cc.sequence(cc.moveTo(0.2,endPos),cc.callFunc(function () {
                item.setPosition(startPos);
                self.setItemContent();
            }),cc.moveTo(0.3,pos))
        );
    },

    moveOut:function (steps,i,item) {
        let pos = this.getPosByStep(steps,i);
        let startPos = this.getStartPos();
        let endPos = this.getEndPos();
        let self = this;
        item.runAction(
            cc.sequence(cc.moveTo(0.2,startPos),cc.callFunc(function () {
                item.setPosition(endPos);
                self.setItemContent();
            }),cc.moveTo(0.3,pos))
        );
    },

    getEndPos:function () {
        let x = cc.winSize.width;
        return cc.v2(1.1*x,this._itemPosY);
    },

    getStartPos:function () {
        let x = cc.winSize.width;
        return cc.v2(-0.1*x,this._itemPosY);
    },


    getContentIdx:function () {
        let contentLen = this._itemContent.length;
        let cIdx = this.steps%contentLen;
        if(cIdx>=0){

        }else{
            cIdx = contentLen+cIdx;
        }
        return cIdx;
    },
    /**
     * @eg. [0,1,2,3,4,5,6]---item is [0,1,2]
     * by one step
     * ----------->[1,2,3,4,5,6,0]---item is [1,2,3]
     */
    setItemContent:function () {
        let contentLen = this._itemContent.length;
        let cIdx = this.getContentIdx();
        this.setContent(cIdx,(this._itemLen+this.selectIdx-1)%this._itemLen);
        this.setContent((cIdx+1)%contentLen,this.selectIdx);
        this.setContent((cIdx+2)%contentLen,(this.selectIdx+1)%this._itemLen);
    },

    setContent:function (cIdx,idx) {

        let logo = this.itemGroup[idx].children[1].getComponent(cc.Sprite);
        let logoUrl = this._itemContent[cIdx][0];
        getSpriteFrameByUrl(logoUrl,function (err,frame) {
            if(err){
                //logo.spriteFrame = new cc.SpriteFrame(cc.url.raw('resources/'+self._itemContent[cIdx][0]+'.png'));
                return 0;
            }
            logo.spriteFrame = frame;
        });

        let nameSprite = this.itemGroup[idx].children[2].getComponent(cc.Sprite);
        let nameUrl = this._itemContent[cIdx][1];
        getSpriteFrameByUrl(nameUrl,function (err,frame) {
            if(err){
                return 0;
            }
            nameSprite.spriteFrame = frame;
        });
        //this.itemGroup[idx].children[1].getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(cc.url.raw(this._itemContent[cIdx][1]));
    },

    showItemAnimation:function (idx,isIn) {
        let animation = this.itemGroup[idx].getComponent(cc.Animation);
         if(!isIn){
             animation.getAnimationState('list_item').wrapMode = cc.WrapMode.Normal;
         }else{
             animation.getAnimationState('list_item').wrapMode = cc.WrapMode.Reverse;
         }
        animation.play('list_item');
    },

    addContent:function (contentArr) {
            Array.prototype.push.apply(this._itemContent,contentArr);
    },

    setRoomType:function (roomType) {
        this._roomType = roomType;
    },

    setOnlineNumbers:function (totalNumber) {
        if(!!totalNumber){
            this.node.children[2].getComponent(cc.Label).string = '在线{0}人'.format(totalNumber);
        }
    },

});