cocos2d - JS 实现翻页效果

cocos2d - JS 实现翻页效果 :

显示效果 :

说明 :

Demo实现了常见的翻页效果 , 还有点击选关模式的放大效果 .

翻页效果主层 JavaScript 代码 :

var SelectModeLayer = cc.Layer.extend({
    deltaCount : null,   //拖动距离累计
    curSelectPage : null,  //当前页面
    curSelectMode : null,  //当前选择模式
    modeArr : null,   //模式数组
    pageWidth : null,    //页面宽度
    pageNum : null,    //总页数

    onEnter: function(){
        this._super();
        this.initData();
        this.init();
        this.addListener();

    },

    initData: function(){
        this.modeArr = [];
        this.pageWidth = 1920;
        this.pageNum = GameInfo.SelecteModeNum;
        this.curSelectPage = UserDate.CurrentMode - 1;
    },

    init: function(){
        for(var i = 1; i <= this.pageNum; i++)
        {
            var bg = new cc.Sprite(res["selectbg" + i]);
            bg.setPosition(cc.winSize.width/2 + this.pageWidth * (i - 1), cc.winSize.height/2);
            this.addChild(bg);

            var ground = new cc.Sprite(res.ground);
            ground.setPosition(cc.winSize.width/2 + this.pageWidth * (i - 1), 100);
            this.addChild(ground);

            var modepic = new cc.Sprite(res["mode" + i]);
            modepic.setTag(i);
            modepic.setPosition(cc.winSize.width/2 + this.pageWidth * (i - 1), cc.winSize.height/2);
            this.addChild(modepic);
            this.modeArr.push(modepic);
        }
        this.setPositionX(-this.pageWidth * this.curSelectPage);
    },

    onTouchBegan: function(touch,event){
        this.stopAllActions();
        var arr = this.modeArr;
        for(var i = 0; i < arr.length; i++)
        {
            var target = arr[i];
            var locationInNode = target.convertToNodeSpace(touch.getLocation());
            var size = target.getContentSize();
            var rect = cc.rect(0, 0, size.width, size.height);
            if (cc.rectContainsPoint(rect, locationInNode))
            {
                this.curSelectMode = this.modeArr[i];
                var scaleTo = cc.scaleTo(0.1,1.1);
                this.curSelectMode.runAction(scaleTo);
            }
        }

        return true;
    },

    onTouchMoved: function(touch,event){

        var delta = touch.getDelta();
        this.deltaCount += delta.x;
        this.x += delta.x * 1.3;
        if(this.x >= 0)
        {
            this.x = 0;
        }
        else if(this.x <= -this.pageWidth * (this.pageNum - 1))
        {
            this.x = -this.pageWidth * (this.pageNum - 1);
        }

    },

    onTouchEnded: function(touch,event){

        if(this.deltaCount <= -150)
        {
            this.curSelectPage++;
        }
        else if(this.deltaCount >= 150)
        {
            this.curSelectPage--;
        }
        else
        {
            if(this.curSelectMode)
            {
                playEffect(sound.button_sound);
                var mode = this.curSelectMode.getTag();
                //cc.log("进入模式 = " + mode);
                UserDate.CurrentMode = mode;
                transScene(SelectLevelScene);
            }
        }

        if(this.curSelectMode && this.curSelectMode.getScale() > 1)
        {
            this.curSelectMode.stopAllActions();
            var ScaleTo = cc.scaleTo(0.1,1);
            this.curSelectMode.runAction(ScaleTo);
        }

        this.curSelectMode = null;
        this.deltaCount = 0;
        this.moveToSelectPage();

    },

    moveToSelectPage: function(){
        if(this.curSelectPage < 0)
        {
            this.curSelectPage = 0;
        }
        else if(this.curSelectPage > (this.pageNum - 1))
        {
            this.curSelectPage = (this.pageNum - 1);
        }
        this.stopAllActions();
        var moveTo = cc.moveTo(0.4, -this.pageWidth * this.curSelectPage, 0);

        var callback = cc.callFunc(function(){
            selectModeUILayer.refreshUI(this.curSelectPage);
        }.bind(this));

        var seq = cc.sequence(moveTo,callback);
        this.runAction(seq);
    },

    addListener: function() {
        cc.eventManager.addListener(cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: this.onTouchBegan.bind(this),
            onTouchMoved: this.onTouchMoved.bind(this),
            onTouchEnded: this.onTouchEnded.bind(this)
        }), this);
    }

});

翻页效果UI层 JavaScript 代码 :

var SelectModeUILayer = cc.Layer.extend({
    pointArr : null,   //页面标记点
    pageNum : null,    //总页数
    onEnter: function(){
        this._super();
        this.initData();
        this.createPoint();
    },

    initData: function(){
        selectModeUILayer = this;
        this.pageNum = GameInfo.SelecteModeNum;
        this.pointArr = [];
    },

    createPoint: function(){
        var spacing = 130;
        var url;
        for(var i = 1; i <= this.pageNum; i++)
        {
            if(i === UserDate.CurrentMode)
            {
                url = res.point2;
            }
            else
            {
                url = res.point1;
            }
            var point = new cc.Sprite(url);
            point.setPosition( ((-this.pageNum / 2) + i - 0.5) * spacing + cc.winSize.width/2, cc.winSize.height - 120);
            this.addChild(point);
            this.pointArr.push(point);
        }

        var backBtn = new cc.Menu(new cc.MenuItemImage(res.backBtn, res.backBtn2, this.backCallback, this));
        backBtn.setPosition(160, cc.winSize.height - 150);
        this.addChild(backBtn,100);
    },

    backCallback: function(){
        cc.log("back");
    },

    refreshUI : function(pos){
        var arr = this.pointArr;
        for(var i = 0; i < arr.length; i++)
        {
            arr[i].initWithFile(res.point1);
        }

        arr[pos].initWithFile(res.point2);

    }

});