How to add popUp/popOut like effects to UIVIew in cocos2d

You may have noticed the popUp and popOut effects of UIAlertView. We can even add such effects to our custom UIViews also. In this tutorial, we will teach you how to add popUp/popOut like effects to UIVIew in your cocos2d application.



in .h:

         UIView *profileView;


in .m:


    //First Create the UIView, and assign its alpha value to zero in the init method
        profileView = [[UIView alloc] init];
        profileView.frame = CGRectMake(50, 50, 270, 430);
        profileView.backgroundColor = [UIColor blueColor];
        profileView.alpha = 0;
        [[[CCDirector sharedDirector] openGLView] addSubview:profileView];

    // Call this function for Fade-In/PopUp
    -(void)effectFunction_FadeIn{
        profileView.transform = CGAffineTransformMakeScale(1.3, 1.3);
        profileView.alpha = 0;
        [UIView animateWithDuration:.35 animations:^{
            profileView.alpha = 1;
            profileView.transform = CGAffineTransformMakeScale(1, 1);
        }];
    }

    // Call this function for Fade-Out/PopOut
    -(void)effectFunction_FadeOut{
        profileView.transform = CGAffineTransformMakeScale(1.3, 1.3);
        profileView.alpha = 1;
        [UIView animateWithDuration:.35 animations:^{
            profileView.alpha = 0;
            profileView.transform = CGAffineTransformMakeScale(1, 1);
        }];
    }

How to create an alert view programmatically: cocos2d

Overview:

Use an activity indicator to show that a task is in progress. An activity indicator appears as a “gear” that is either spinning or stopped.

You control when an activity indicator animates by calling the startAnimating and stopAnimating methods. To automatically hide the activity indicator when animation stops, set the hidesWhenStopped property to YES.
 

  You can create the alert view programmatically as below:

// in .h //

    UIImageView *bgView;
    UIActivityIndicatorView *spin;

// in .m //

//  Call the following method in init/when the scene loads:
 -(void)createIndicator
    {
        spinnerAdded = TRUE;
        bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 140, 140)];
        bgView.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.8];
        bgView.layer.cornerRadius = 8.0;
        [[[CCDirector sharedDirector] openGLView] addSubview:bgView];
           
        spin = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
        [bgView addSubview:spin];
        [spin setHidesWhenStopped:YES];
        spin.center = CGPointMake(70, 70);
        [spin startAnimating];
        [spin release];
           
        UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 105, bgView.frame.size.width, 15)];
        lbl.center = CGPointMake(bgView.frame.size.width/2, lbl.center.y);   
        [bgView addSubview:lbl];   
        [lbl setBackgroundColor:[UIColor clearColor]];   
        lbl.textAlignment = UITextAlignmentCenter;   
        [lbl setFont:[UIFont boldSystemFontOfSize:14]];   
        [lbl setTextColor:[UIColor whiteColor]];   
        lbl.text = @"Loading...";
    }



startAnimating:

     Starts the animation of the progress indicator. When the progress indicator is animated, the gear spins to indicate indeterminate progress. The indicator is animated until stopAnimating is called.

 Syntax:

                  [spin startAnimating];


stopAnimating:

     Stops the animation of the progress indicator.



  Syntax:

           [spin stopAnimating];
           [bgView removeFromSuperview];


UIActivityIndicatorStyle:

   The visual style of the progress indicator.

typedef enum {
   UIActivityIndicatorViewStyleWhiteLarge,
   UIActivityIndicatorViewStyleWhite,
   UIActivityIndicatorViewStyleGray,
} UIActivityIndicatorViewStyle;