Cocos2d-X中实现菜单特效

Cocos2d-X中可以讲菜单和动作结合起来使用实现菜单特效

程序实例1:使用菜单和动作的组合实现菜单特效《一》

#include "MenuItem.h"

CCScene* MenuItem::scene()
{
    CCScene* scene = CCScene::create();

    MenuItem* layer = MenuItem::create();

    scene->addChild(layer);

    return scene;
}

bool MenuItem::init()
{
    //初始化父类层
    CCLayer::init();

    //得到窗口的尺寸
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //创建一个Menu(看不到效果,Menu只是一个容器)
    CCMenu* menu = CCMenu::create();

    //添加Menu
    addChild(menu);

    //创建一个只显示文本的菜单项
    CCMenuItemFont* itemFont = CCMenuItemFont::create("This is Font");  

    //添加菜单项
    menu->addChild(itemFont);  

    //创建一个带有艺术字体的菜单
    CCMenuItemAtlasFont* itemAtlas = CCMenuItemAtlasFont::create("123456", "labelatlasimg.png", 24, 32, '0');  

    //添加菜单项
    menu->addChild(itemAtlas);  

    //创建带有图片的菜单项
    CCMenuItemImage* itemImage = CCMenuItemImage::create("CloseNormal.png", "CloseSelected.png");  

   //添加菜单项
    menu->addChild(itemImage);  

    //用标签创建菜单项
    CCMenuItemLabel* itemLabelTTF = CCMenuItemLabel::create(
           CCLabelTTF::create("This is Label TTF item", "Arial", 36)
            );  

    //添加菜单项目
   menu->addChild(itemLabelTTF);  

   //用标签创建菜单项,并且实现显示彩色的文本
   CCMenuItemLabel* itemLabelAtlas = CCMenuItemLabel::create(
            CCLabelAtlas::create("123456", "labelatlasimg.png", 24, 32, '0')
            );  

    //添加菜单项
   menu->addChild(itemLabelAtlas);  

   //用艺术字体创建菜单项
   CCMenuItemLabel* itemLabelBMFont = CCMenuItemLabel::create(
       CCLabelBMFont::create("This is BMFONT item", "bitmapFontTest.fnt")
         );  

        //添加菜单项
        menu->addChild(itemLabelBMFont);  

        //用精灵创建菜单项
        CCMenuItemSprite* itemSprite = CCMenuItemSprite::create(
          CCSprite::create("CloseNormal.png"),
            CCSprite::create("CloseSelected.png"));  

        //添加菜单项
        menu->addChild(itemSprite);    

    //创建可以来回切换的菜单
    //创建菜单项的选项
    CCMenuItem* subItem1 = CCMenuItemFont::create("ON");
	CCMenuItem* subItem2 = CCMenuItemFont::create("OFF");
	CCMenuItem* subItem3 = CCMenuItemFont::create("ON/OFF");

    //菜单项中添加选项
    CCMenuItemToggle* itemToggle = CCMenuItemToggle::create(subItem1);
    itemToggle->addSubItem(subItem2);
    itemToggle->addSubItem(subItem3);

    //添加菜单项
    menu->addChild(itemToggle);

    //自动对齐菜单项
	menu->alignItemsVertically();

    //实现菜单出场效果
    //第一个菜单从窗口左边进入,第二个从右边进入,以此类推

    //创建一个数组保存菜单项
    CCArray* arr = menu->getChildren();
    CCObject* obj;

    //用于遍历菜单项
    int index = 0;

    CCARRAY_FOREACH(arr, obj)
    {
        //强制类型转换呢(将菜单项的类型转换成相同的类型)
        CCMenuItem* item = (CCMenuItem*)obj;

		if (index % 2 == 0)
		{
            //设置菜单项的位置(将菜单设置在窗口的最左边)
			item->setPositionX(item->getPositionX() - winSize.width);

            //移动菜单(设置菜单从左往右移动)
            //第一个参数:菜单移动的时间
            //第二个参数:菜单移动后的位置
			CCMoveBy* moveBy = CCMoveBy::create(10, ccp(winSize.width, 0));
			item->runAction(moveBy);
		}
		else
		{
			//把移动到右边
			item->setPositionX(item->getPositionX() + winSize.width);

            //移动菜单(设置菜单从右往左移动)
            //第一个参数:菜单移动的时间
            //第二个参数:菜单移动后的位置
            CCMoveBy* moveBy = CCMoveBy::create(10, ccp(-winSize.width, 0));
			item->runAction(moveBy);
		}

		index++;
    }

    return true;
}

执行结果:

程序实例2:使用菜单和动作的组合实现菜单特效《二》

#include "MenuItem.h"

CCScene* MenuItem::scene()
{
    CCScene* scene = CCScene::create();

    MenuItem* layer = MenuItem::create();

    scene->addChild(layer);

    return scene;
}

bool MenuItem::init()
{
    //初始化父类层
    CCLayer::init();

    //得到窗口的尺寸
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //创建一个Menu(看不到效果,Menu只是一个容器)
    CCMenu* menu = CCMenu::create();

    //添加Menu
    addChild(menu);

    //创建一个只显示文本的菜单项
    CCMenuItemFont* itemFont = CCMenuItemFont::create("This is Font");  

    //添加菜单项
    menu->addChild(itemFont);  

    //创建一个带有艺术字体的菜单
    CCMenuItemAtlasFont* itemAtlas = CCMenuItemAtlasFont::create("123456", "labelatlasimg.png", 24, 32, '0');  

    //添加菜单项
    menu->addChild(itemAtlas);  

    //创建带有图片的菜单项
    CCMenuItemImage* itemImage = CCMenuItemImage::create("CloseNormal.png", "CloseSelected.png");  

   //添加菜单项
    menu->addChild(itemImage);  

    //用标签创建菜单项
    CCMenuItemLabel* itemLabelTTF = CCMenuItemLabel::create(
           CCLabelTTF::create("This is Label TTF item", "Arial", 36)
            );  

    //添加菜单项目
   menu->addChild(itemLabelTTF);  

   //用标签创建菜单项,并且实现显示彩色的文本
   CCMenuItemLabel* itemLabelAtlas = CCMenuItemLabel::create(
            CCLabelAtlas::create("123456", "labelatlasimg.png", 24, 32, '0')
            );  

    //添加菜单项
   menu->addChild(itemLabelAtlas);  

   //用艺术字体创建菜单项
   CCMenuItemLabel* itemLabelBMFont = CCMenuItemLabel::create(
       CCLabelBMFont::create("This is BMFONT item", "bitmapFontTest.fnt")
         );  

        //添加菜单项
        menu->addChild(itemLabelBMFont);  

        //用精灵创建菜单项
        CCMenuItemSprite* itemSprite = CCMenuItemSprite::create(
          CCSprite::create("CloseNormal.png"),
            CCSprite::create("CloseSelected.png"));  

        //添加菜单项
        menu->addChild(itemSprite);    

    //创建可以来回切换的菜单
    //创建菜单项的选项
    CCMenuItem* subItem1 = CCMenuItemFont::create("ON");
	CCMenuItem* subItem2 = CCMenuItemFont::create("OFF");
	CCMenuItem* subItem3 = CCMenuItemFont::create("ON/OFF");

    //菜单项中添加选项
    CCMenuItemToggle* itemToggle = CCMenuItemToggle::create(subItem1);
    itemToggle->addSubItem(subItem2);
    itemToggle->addSubItem(subItem3);

    //添加菜单项
    menu->addChild(itemToggle);

    //自动对齐菜单项
	menu->alignItemsVertically();

    //实现菜单出场效果
    //第一个菜单从窗口左边进入,第二个从右边进入,以此类推
    //创建一个数组保存菜单项
    CCArray* arr = menu->getChildren();
    CCObject* obj;
    float dt = 2.0f;//用于延迟显示菜单

    //用于遍历菜单项
    int index = 0;

    CCARRAY_FOREACH(arr, obj)
    {
        //强制类型转换呢(将菜单项的类型转换成相同的类型)
        CCMenuItem* item = (CCMenuItem*)obj;

        //创建延迟动作
        CCDelayTime* delay = CCDelayTime::create(dt*index);

        //用于创建弹性特效
        CCEaseElasticOut* out = NULL;

		if (index % 2 == 0)
		{
            //设置菜单项的位置(将菜单设置在窗口的最左边)
			item->setPositionX(item->getPositionX() - winSize.width);

            //移动菜单(设置菜单从左往右移动)
            //第一个参数:菜单移动的时间
            //第二个参数:菜单移动后的位置
			CCMoveBy* moveBy = CCMoveBy::create(10, ccp(winSize.width, 0));

            //弹性效果
            out = CCEaseElasticOut::create(moveBy);
		}
		else
		{
			//把移动到右边
			item->setPositionX(item->getPositionX() + winSize.width);

            //移动菜单(设置菜单从右往左移动)
            //第一个参数:菜单移动的时间
            //第二个参数:菜单移动后的位置
            CCMoveBy* moveBy = CCMoveBy::create(10, ccp(-winSize.width, 0));

            //弹性效果
            out = CCEaseElasticOut::create(moveBy);
		}

        //使得菜单项按照一定的顺序执行
        CCSequence* seq = CCSequence::create(delay, out, NULL);
        item->runAction(seq);
        index++;//遍历菜单项
    }

    return true;
}

执行结果:



时间: 2024-10-08 20:05:53

Cocos2d-X中实现菜单特效的相关文章

CSS3超酷移动手机滑动隐藏側边栏菜单特效

这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及使用translate来实现滑动側边栏的效果. 每个滑动側边栏效果都带有从右到左淡入淡出的滑动过渡效果. 菜单条中的菜单项以一个接一个的方式显示,这样的效果是通过为它们分别加入 transition-delay 来实现的.以下来看看默认的滑动側边栏效果的制作方法. 插件中使用了font-awesom

JS三级折叠菜单特效 自动收缩其它级

真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x

竖向二级导航菜单特效的实现

竖向二级导航菜单特效的实现:在网页设计中,导航菜单的应用非常频繁,横向二级导航菜单的应用可能会多一些,垂直导航菜单可能稍稍少一些,当然这是相对而言的,竖向二级导航菜单的使用也是非常的频繁的,下面就简单介绍一下如何实现此功能,咱们这里只是介绍如何实现,关于美化方面不是重点,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="a

Cocos2d-x Lua中实例:特效演示

Cocos2d-x Lua中实例:特效演示 下面我们通过一个实例介绍几个特效的使用,这个实例如下图所示,上图是一个操作菜单场景,选择菜单可以进入到下图动作场景,在下图动作场景中点击Go按钮可以执行我们选择的特性动作,点击Back按钮可以返回到菜单场景. 特效实例 我们重点看看MyActionScene场景,MyActionScene.lua主要代码如下: [html] view plaincopy … … local sprite                                 

ASP.NET MVC搭建项目后台UI框架—2、菜单特效

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 上一篇,已经把整个项目的框框给搭建好了,但是还没有任何js效果实现.这一节,我就来说下关于菜单的特效实现.我需要的效果如下: 需求总结: 点击顶部菜单模块,左侧显示不同模块下面的菜单列表 点击左侧菜单选项,展开下面的子菜单,并折叠其它菜单模块,菜单图标折叠显示为+,展开显示为-. 1.先看下Top视图中代码: 2.在Top视图的head中添加如下js: <script sr

Android滑动菜单框架完全解析,教你如何一分钟实现滑动菜单特效

本文首发于CSDN博客,转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8744400 之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得.如果忘记了其中的实现原理或者还没看过的朋友,请先去看一遍之前的文章 Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现 ,因为我们今天要实现的滑动菜单框架也是基于同样的原理的. 之前的文章中在最后也提到了,如果是你的应用程序中有很多个Activity都需

Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现

本文首发于CSDN博客,转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8714621 人人客户端有一个特效还是挺吸引人的,在主界面手指向右滑动,就可以将菜单展示出来,而主界面会被隐藏大部分,但是仍有左侧的一小部分同菜单一起展示. 据说人人客户端的这个特效是从facebook客户端模仿来的,至于facebook是不是又从其它地方模仿来的就不得而知了.好,今天我们就一起来实现这个效果,总之我第一次看到这个特效是在人人客户端看到的,我

JavaScript特效源码(3、菜单特效)

1.左键点击显示菜单 左键弹出式菜单[推荐][修改显示的文字及链接即可][共2步] ====1.将以下代码加入HEML的<head></head>之间: <style type="text/css"> body{font: 9pt "宋体"; margintop: 0px ; color: #ffffff; background: #000000} a.{ font: 9pt "宋体"; cursor: han

CSS3超酷移动手机滑动隐藏侧边栏菜单特效

这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效.这四种效果分别是:默认的点击滑动侧边栏菜单效果.带3D transforms的滑动侧边栏效果.文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果. 每一个滑动侧边栏效果都带有从右到左淡入淡出的滑动过渡效果.菜单栏中的菜单项以一个接一个的方式显示,这种效果是通过为它们分别添加 transition-delay 来实现的.下面来看看默认的滑动侧边栏效果的制作方法. 插件中使用了font-awesome