首页 > 代码库 > Cocos2D实现上下滚动式状态窗体

Cocos2D实现上下滚动式状态窗体

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处.
假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;)


有时候要显示的内容太多,我们无法在iOS设备的小屏幕上显示出来,这时候我们能够将内容划分为多个子窗体,依次显示相应的窗体.

在SpritBuilder中新建一个类型为Node的CCB文件,调整样式例如以下:

技术分享

我这里划分了2个子窗体,用中间的箭头切割.

注意以下的子窗体中的内容是动态获取的,所以这里留空,可是要保留一个引用的名称.

回到Xcode中,进入相应的类,加入例如以下方法:

-(void)expandView{
    CCLOG(@"%@ pressed!!!",NSStringFromSelector(_cmd));
    CCActionMoveTo *move;
    CCActionRotateTo *rotate;
    CCAction *fade;
    if (!_isExpanded) {
        _isExpanded = YES;
        //_upperNode.visible = NO;
        fade = [CCActionFadeOut actionWithDuration:1.f];
        move = [CCActionMoveTo actionWithDuration:1 position:ccp(0, 0)];
        rotate = [CCActionRotateTo actionWithDuration:1 angle:180];
    }else{
        _isExpanded = NO;
        //_upperNode.visible = YES;
        fade = [CCActionFadeIn actionWithDuration:1.f];
        move = [CCActionMoveTo actionWithDuration:1 position:ccp(0, -1)];
        rotate = [CCActionRotateTo actionWithDuration:1 angle:0];
    }
    [self runAction:move];
    [_expandArrow runAction:rotate];
    [_upperNode runAction:fade];
}

该方法的主要功能是在点击button时下滑或上滑子窗体,应用一些动画效果,同一时候改变button箭头的方向.

以下是实际效果:

技术分享

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

Cocos2D实现上下滚动式状态窗体