****************************************************************************
时间:2015-04-06
作者:Sharing_Li
转载注明出处:http://blog.csdn.net/sharing_li/article/details/44903971
****************************************************************************
一般游戏的主界面按钮的摆放,都是中心垂直对齐,如果弄得稍微炫一点,就是下面的这种效果,也就是本篇要讲解的内容:
先分析一下功能需求:
1、一共四个按钮,只有点击了最前面的按钮,按钮的响应事件才能触发,点击了其他按钮,则旋转到最前面。
2、点击了除最前面的按钮外的动画效果,和左右滑动时的动画效果。(大小,透明度,运动轨迹)
3、左右滑动到途中时松手时的动画调整。
4、按钮Z序的调整
5、滑动区域的限制
接下来看看代码怎么写:
定义一个类BtnTurn,来看头文件
#ifndef __BTN_TURN_H__
#define __BTN_TURN_H__
#include "cocos2d.h"
USING_NS_CC;
enum BtnPos
{
Pos_Bottom = 1,
Pos_Left,
Pos_Top,
Pos_Right,
};
class BtnTurn : public cocos2d::Layer
{
public:
BtnTurn();
~BtnTurn();
virtual bool init();
CREATE_FUNC(BtnTurn)
protected:
virtual bool onTouchBegan(Touch* touch, Event* pEvent);
virtual void onTouchMoved(Touch *pTouch, Event *pEvent);
virtual void onTouchEnded(Touch *pTouch, Event *pEvent);
//点击按钮之后的动画
void runTouchedAmt(Sprite * btn);
//滑动界面的动画
void runSlidedAmt(bool isLeft,float ratio,float judgePosX);
private:
Sprite * m_btn1;
Sprite * m_btn2;
Sprite * m_btn3;
Sprite * m_btn4;
Vec2 m_posBottom;
Vec2 m_posLeft;
Vec2 m_posTop;
Vec2 m_posRight;
Point m_firstPos;
Size m_winSize;
bool m_valid;//先点击有效区域
bool m_invalid;//先点击无效区域
};
#endif
这里最主要的核心代码就是沿椭圆轨迹旋转效果,之前有篇文章讲解了沿椭圆运动的动画,可以像用系统的MoveTo等使用runAction,参考地址:
http://blog.csdn.net/sharing_li/article/details/43268877
本篇将不采用链接中说的方法来实现。
首先,我们定义一些全局数据:
const float RUNTIME = 0.3; //动画运行时间
float A;//椭圆长半径
float Bd;//下椭圆短半径
float Bu;//上椭圆短半径
float Cx;//椭圆中心X坐标
float Cy;//椭圆中心Y坐标
再来看看我们的初始化函数:
m_winSize = Director::getInstance()->getWinSize();
m_posBottom = Vec2(0,0);
m_posLeft = Vec2(-m_winSize.width * 0.24,m_winSize.height * 0.15);
m_posTop = Vec2(0,m_winSize.height * 0.24);
m_posRight = Vec2(m_winSize.width * 0.24,m_winSize.height * 0.15);
A = m_posBottom.x - m_posLeft.x;
Bu &#