iOS_31_cocos2d_Progress進度條 – iPhone手機開發技術文章 iPhone軟體開發教學課程

最終效果圖:


進度條節點【CCProgressNode】,構造時依賴一個Sprite

【CCProgressNode】添加一個CCActionProgressFromTo動作


也可以在update方法中,更改【CCProgressNodevc3Ryb25nPjxzdHJvbmc+ob+1xHBlcmNlbnRhZ2XK9NDULMq1z9a9+LbIzPXQp7n7PC9zdHJvbmc+PGJyPgo8L3N0cm9uZz4KCjxzdHJvbmc+PHN0cm9uZz6hvkNDUHJvZ3Jlc3NOb2RlPC9zdHJvbmc+PHN0cm9uZz6hvzwvc3Ryb25nPrv5sb7K9NDUo7o8L3N0cm9uZz4KCjxzdHJvbmc+PGltZyBzcmM9″https://www.2cto.com/uploadfile/Collfiles/20140924/20140924090028163.png” alt=”\”>

【CCProgressNode】構造方法:


它的類型隻有兩種:

雷達和條形


進度條場景代碼

//
//  ProgressScene.h
//  31_cocos2D入門
//
//  Created by beyond on 14-9-22.
//  Copyright (c) 2014年 com.beyond. All rights reserved.
//

#import "CCScene.h"
#import "cocos2d.h"
#import "cocos2d-ui.h"
@interface ProgressScene : CCScene

+ (instancetype)scene;
- (id)init;
@end
//
//  ProgressScene.m
//  31_cocos2D入門
//
//  Created by beyond on 14-9-22.
//  Copyright (c) 2014年 com.beyond. All rights reserved.
//  演示進度條:雷達或者bar條形

#import "ProgressScene.h"



@interface ProgressScene ()
{
    // 精靈
    CCSprite *_sprite;
    
    // 相當於一個ProgressView,通過進度的形式,展示一個Sprite,(根據說明可知,其構造方法,需要Sprite)
    CCProgressNode *_progressNode;
}
@end

@implementation ProgressScene

#pragma mark - 生命周期
+ (instancetype)scene
{
	return [[self alloc] init];
}
- (id)init
{
    
    self = [super init];
    if (!self) return(nil);
    
    // 1.創建背景顏色為深灰色
    [self setupBgColor];
    
    // 2.添加一個返回到主場景的按鈕,位於右上方
    [self addBackToMainBtnOnRightTop];
    
    
    
    // 3.添加演示按鈕,點擊後,展示不同的進度效果
    [self addShowBtns];
    
    // 返回創建好的場景對象
	return self;
}




// 3.添加演示按鈕,點擊後,展示不同的進度效果
- (void)addShowBtns
{
    // 1.創建一個精靈,並不添加到self
    _sprite = [CCSprite spriteWithImageNamed:@"nanaLogo.jpg"];
    _sprite.name = @"nana";
    // 2.相當於一個ProgressView,通過進度的形式,展示一個Sprite,(根據說明可知,其構造方法,需要Sprite)
    _progressNode = [CCProgressNode progressWithSprite:_sprite];
    // 也要設置位置
    _progressNode.position = ccp(self.contentSize.width*0.5,self.contentSize.height/2);
    
    
    
    // 3.雷達
    [self addBtn:@"【雷達】" position:ccp(0, 0) target:self sel:@selector(radarBtnClick)];
    // 4.bar
    [self addBtn:@"【bar】" position:ccp(0, 0.2) target:self sel:@selector(barBtnClick)];
    // 5.label
    [self addBtn:@"【Label】" position:ccp(0, 0.4) target:self sel:@selector(labelBtnClick)];
}

#pragma mark - 按鈕點擊
// 1.點擊按鈕,演示 【雷達進度條】
- (void)radarBtnClick
{
    [_progressNode removeFromParent];
    
    // 設置類型為:雷達進度條
    _progressNode.type = CCProgressNodeTypeRadial;
    // 范圍:0 ~ 100  0表示什麼也不顯示
    _progressNode.percentage = 0;
    
    // 雷達的中心點,類似錨點
    _progressNode.midpoint = ccp(0.5,0.5);
    
    // 2.添加到self
    [self addChild:_progressNode];
    
    // 3.可以通過執行動作,實現進度條的增加,也可以通過消息調度update方法中
//    CCActionProgressFromTo *action = [CCActionProgressFromTo actionWithDuration:1 from:0 to:100];
//    [_progressNode runAction:action];
}
// 2.點擊按鈕,演示 【bar進度條】
- (void)barBtnClick
{
    [_progressNode removeFromParent];
    
    // 設置類型為:bar進度條
    _progressNode.type = CCProgressNodeTypeBar;
    // 范圍:0 ~ 100  0表示什麼也不顯示
    _progressNode.percentage = 0;
    
    // bar的中心點,類似錨點,設置從左下角開始
    _progressNode.midpoint = ccp(0.0,0.0);
    
    // barChangeRate,是一個point,僅在bar條件下有效,隻讓X方向增加,Y方向不增加
    _progressNode.barChangeRate = ccp(1.0,0.0);
    
    // 註意:當barChangeRate中y為0時,表示Y方向不會增加,因此,midpoint的y可以隨便寫
    
    // 2.添加到self
    [self addChild:_progressNode];
    
    // 3.可以通過執行動作,實現進度條的增加,也可以通過消息調度update方法中
    //    CCActionProgressFromTo *action = [CCActionProgressFromTo actionWithDuration:1 from:0 to:100];
    //    [_progressNode runAction:action];
}
// 2.點擊按鈕,演示 【Label進度條】
- (void)labelBtnClick
{
    [_progressNode removeFromParent];
    // cocos2d默認字體:Marker Felt
    // 1.先展示一個白色的
    CCLabelTTF *bgWhiteLabel = [CCLabelTTF labelWithString:@"Loading..." fontName:@"Marker Felt" fontSize:60];
    bgWhiteLabel.position = ccp(self.contentSize.width*0.5,self.contentSize.height/2);
    [self addChild:bgWhiteLabel];
    
    // 2.創建一個紅色的,但是一開始不顯示,進度為0
    CCLabelTTF *redLabel = [CCLabelTTF labelWithString:@"Loading..." fontName:@"Marker Felt" fontSize:60];
    redLabel.color = [CCColor colorWithCcColor3b:ccc3(255, 0, 0)];
    
    _progressNode = [CCProgressNode progressWithSprite:redLabel];
    _progressNode.position = bgWhiteLabel.position;

    
    // 設置類型為:bar進度條
    _progressNode.type = CCProgressNodeTypeBar;
    // 范圍:0 ~ 100  0表示什麼也不顯示
    _progressNode.percentage = 0;
    
    // bar的中心點,類似錨點,設置從左下角開始
    _progressNode.midpoint = ccp(0.0,0.0);
    
    // barChangeRate,是一個point,僅在bar條件下有效,隻讓X方向增加,Y方向不增加
    _progressNode.barChangeRate = ccp(1.0,0.0);
    
    // 註意:當barChangeRate中y為0時,表示Y方向不會增加,因此,midpoint的y可以隨便寫
    
    // 2.添加到self
    [self addChild:_progressNode];
    
    
}
#pragma mark - 消息調度
// cocos2d V3中, 隻要實現update方法,就會自動調用
// 因此,也可以通過消息調度來實現 進度條的增加
- (void)update:(CCTime)delta
{
    _progressNode.percentage++;
}
#pragma mark - 抽取
// 添加一個按鈕
- (void)addBtn:(NSString *)title position:(CGPoint)position target:(id)target sel:(SEL)sel
{
    // 創建一個按鈕,點擊後進入下一個場景
    CCButton *btn = [CCButton buttonWithTitle:title fontName:@"Verdana-Bold" fontSize:18.0f];
    btn.positionType = CCPositionTypeNormalized;
    // 例如:ccp(0.5f, 0.35f) 是位於屏幕的中間靠下方
    // 註意這裡是笛卡爾坐標系,原點在左下方
    btn.position = position;
    btn.anchorPoint = ccp(0, 0);
    // 監聽點擊事件
    [btn setTarget:target selector:sel];
    [self addChild:btn];
}

#pragma mark - 固定寫法
// 固定寫法:右上方,創建一個返回按鈕,點擊後,返回至主場景
- (void)addBackToMainBtnOnRightTop
{
    // 5、右上方,創建一個返回按鈕,點擊後,返回至主場景
    CCButton *backButton = [CCButton buttonWithTitle:@"[ 回到Main ]" fontName:@"Verdana-Bold" fontSize:18.0f];
    backButton.positionType = CCPositionTypeNormalized;
    // 屏幕的右上方 註意這裡是笛卡爾坐標系,原點在左下方
    backButton.position = ccp(0.85f, 0.95f);
    // 監聽點擊事件
    [backButton setTarget:self selector:@selector(backToMainBtnClicked)];
    [self addChild:backButton];
}

// 固定寫法: 回到主場景
- (void)backToMainBtnClicked
{
    // 使用轉場動畫,切換場景至 主場景,動畫:從左向右
    [[CCDirector sharedDirector] replaceScene:[NSClassFromString(@"MainScene") scene]
                               withTransition:[CCTransition transitionPushWithDirection:CCTransitionDirectionRight duration:1.0f]];
}

// 固定定法:創建背景顏色為深灰色
- (void)setupBgColor
{
    
    CCNodeColor *background = [CCNodeColor nodeWithColor:[CCColor colorWithRed:0.2f green:0.2f blue:0.2f alpha:1.0f]];
    [self addChild:background];
}

@end










發佈留言