cocos2dx之旋转的button

****************************************************************************

时间：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 &#