最终效果图
英雄联盟皮肤选择
设计说明
实现目标所需要的动作
移动(Moveto),伸缩(Scaleto),倾斜(OrbitCamera)
实现目标所需要函数(这是一个数学函数）
x/(x+a)
其中a为常量，用来计算上面三个动作的值
大小
与原版Menu不同，大小不是全屏的，默认是屏幕的(2/3)，可以通过setContentSize()函数设置
_index变量
将所有的菜单项平铺构成一个长方形，_index表示目前在中间位置的点，如下图
显示方式
将菜单项距中心的距离(i-_indxe)作为函数变量x,具体内容查看LOLMenu::updatePosition();
操作说明
滑动四分之一菜单宽的距离为一个单位的_index,距离大于0.6小于1.0的部分进1
使用
使用这个菜单只要知道两个函数：
1.构造函数：LOLMenu::create()(由CREATE_FUNC创建)
2.添加MenuItem：void addMenuItem(cocos2d::MenuItem *item);
其它函数可以看代码
菜单代码
LOLMenu.h
#ifndef__LOL__TE_MENU_H__
#define__LOL__TE_MENU_H__
#include"cocos2d.h"
/*
*模仿英雄联盟的皮肤选择菜单
*不同点在于，英雄联盟当皮肤过多时，部分皮肤会移出边缘，不显示
*我会显示所以菜单项，向边缘移动会不断减缓
*/
class
LOLMenu:
public
cocos2d::Layer{
:
//构造方法
CREATE_FUNC(LOLMenu);
//添加菜单项
void
addMenuItem(cocos2d::MenuItem*item);
//位置矫正修改位置forward为移动方向当超过1/3，进1
//true为正向false负
rectify(
bool
forward);
//初始化
virtual
init();
//重置显示所引号设置为0
reset();
//设置当前显示索引
void
setIndex(
int
index);
//设置当前显示菜单项的索引号
float
getIndex();
//返回被选中的item
cocos2d::MenuItem*getCurrentItem();
private
:
//更新位置
updatePosition();
//更新位置，有动画
updatePositionWithAnimation();
//数学计算式width*index/(abs(index)+CALC_A),其中CALC_A为常数
float
calcFunction(
index,
width);
:
//菜单菜单项的索引号
_index;
//上一次菜单项的索引号
_lastIndex;
//菜单项集合,_children顺序会变化，新建数组保存顺序
cocos2d::Vector<cocos2d::MenuItem*>_items;
//监听函数
onTouchBegan(cocos2d::Touch*touch,cocos2d::Event*event);
virtual
onTouchEnded(cocos2d::Touch*touch,cocos2d::Event*event);
onTouchMoved(cocos2d::Touch*touch,cocos2d::Event*event);
//动画完结调用函数，这个主要是确定哪一个菜单项在前面
actionEndCallBack(
dx);
//当前被选择的item
cocos2d::MenuItem*_selectedItem;
};
#endif
|
#include"LOLMenu.h"
#include<math.h>
#definePIacos(-1)
//菜单的缩小比例最小的比例是1-MENU_SCALE
#defineMENU_SCALE0.3
//菜单的倾斜度最多为45度
#defineMENU_ASLOPE60.0
//calcFunction(x)为x/(x+a),其中a为常数
#defineCALC_A1
//动画运行时间
#defineANIMATION_DURATION0.3f
//菜单项的大小与屏幕的比例，当然可以通过setContentSize设置
#defineCONTENT_SIZE_SCALE(2.0/3)
//菜单项长度与菜单长度的比例滑动一个菜单项长度，菜单项变化一个
#defineITEM_SIZE_SCALE(1.0/4)
/*
代码里面还有可以设置的参数，这里没有一一例出或给出函数
*/
USING_NS_CC;
bool
LOLMenu::init(){
if
(!Layer::init())
return
false
;
_index=0;
_lastIndex=0;
this
->ignoreAnchorPointForPosition(
);
_selectedItem=nullptr;
autosize=Director::getInstance()->getWinSize();
->setContentSize(size*CONTENT_SIZE_SCALE);
->setAnchorPoint(Vec2(0.5f,0.5f));
autolistener=EventListenerTouchOneByOne::create();
listener->onTouchBegan=CC_CALLBACK_2(LOLMenu::onTouchBegan,
);
listener->onTouchMoved=CC_CALLBACK_2(LOLMenu::onTouchMoved,monospace!important; font-size:1em!important; min-height:inherit!important; color:black!important">);
listener->onTouchEnded=CC_CALLBACK_2(LOLMenu::onTouchEnded,monospace!important; font-size:1em!important; min-height:inherit!important; color:black!important">);
getEventdispatcher()->addEventListenerWithSceneGraPHPriority(listener,monospace!important; font-size:1em!important; min-height:inherit!important; color:black!important">);
true
;
};
void
LOLMenu::addMenuItem(cocos2d::MenuItem*item){
item->setPosition(
->getContentSize()/2);
->addChild(item);
_items.pushBack(item);
reset();
//如果希望开始没有移动效果，改成updatePosition函数即可
updatePositionWithAnimation();
return
;
}
LOLMenu::updatePosition(){
automenuSize=getContentSize();
for
(
int
i=0;i<_items.size();i++){
//设置位置
float
x=calcFunction(i-_index,menuSize.width/2);
_items.at(i)->setPosition(Vec2(menuSize.width/2+x,menuSize.height/2));
//设置zOrder,即绘制顺序
_items.at(i)->setZOrder(-
abs
((i-_index)*100));
//设置伸缩比例
_items.at(i)->setScale(1.0-
(calcFunction(i-_index,MENU_SCALE)));
//设置倾斜，Node没有setCamera函数，将OrbitCamera的运行时间设为0来达到效果
autoorbit1=OrbitCamera::create(0,1,calcFunction(i-_lastIndex,MENU_ASLOPE),MENU_ASLOPE)-calcFunction(i-_index,0);
_items.at(i)->runAction(orbit1);
}
;
}
LOLMenu::updatePositionWithAnimation(){
//先停止所有可能存在的动作
i=0;i<_items.size();i++)
_items.at(i)->stopAllActions();
automenuSize=getContentSize();
i=0;i<_items.size();i++){
((i-_index)*100));
automoveto=Moveto::create(ANIMATION_DURATION,Vec2(menuSize.width/2+x,menuSize.height/2));
_items.at(i)->runAction(moveto);
autoscaleto=Scaleto::create(ANIMATION_DURATION,(1-
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,MENU_SCALE))));
_items.at(i)->runAction(scaleto);
autoorbit1=OrbitCamera::create(ANIMATION_DURATION,calcFunction(i-_index,MENU_ASLOPE)-calcFunction(i-_lastIndex,0);
_items.at(i)->runAction(orbit1);
}
scheduleOnce(schedule_selector(LOLMenu::actionEndCallBack),ANIMATION_DURATION);
;
}
LOLMenu::reset(){
_lastIndex=0;
_index=0;
}
LOLMenu::setIndex(
index){
_lastIndex=_index;
->_index=index;
}
LOLMenu::getIndex(){
_index;
}
MenuItem*LOLMenu::getCurrentItem(){
(_items.size()==0)
nullptr;
_items.at(_index);
}
LOLMenu::onTouchBegan(Touch*touch,Event*event){
//先停止所有可能存在的动作
i=0;i<_items.size();i++)
_items.at(i)->stopAllActions();
(_selectedItem)
_selectedItem->unselected();
autoposition=
->convertToNodeSpace(touch->getLocation());
autosize=
->getContentSize();
autorect=Rect(0,size.width,size.height);
(rect.containsPoint(position)){
;
}
;
}
LOLMenu::onTouchEnded(Touch*touch,Event*event){
autosize=getContentSize();
autoxDelta=touch->getLocation().x-touch->getStartLocation().x;
rectify(xDelta>0);
(
(xDelta)<size.width/24&&_selectedItem)
_selectedItem->activate();
updatePositionWithAnimation();
;
}
LOLMenu::onTouchMoved(Touch*touch,Event*event){
autoxDelta=touch->getDelta().x;
autosize=getContentSize();
_lastIndex=_index;
_index-=xDelta/(size.width*ITEM_SIZE_SCALE);
updatePosition();
;
}
LOLMenu::rectify(
forward){
autoindex=getIndex();
(index<0)
index=0;
(index>_items.size()-1)
index=_items.size()-1;
(forward){
index=(
)(index+0.4);
}
else
)(index+0.6);
setIndex((
)index);
}
LOLMenu::actionEndCallBack(
dx){
_selectedItem=getCurrentItem();
(_selectedItem)
_selectedItem->selected();
}
LOLMenu::calcFunction(
index,
width){
width*index/(
(index)+CALC_A);
}
LOLMenuDemo.cpp
#include"LOLMenuDemo.h"