/**
* 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);
}
},
});
cocos2dx creator 创建类似gallery控件的循环效果
最新推荐文章于 2022-01-15 13:46:15 发布