List of Buttons lighting up at random

Question

The method im trying to achieve is set a button to 0.5 alpha then back to 1 in the space of three seconds. After its executed 5 time on the four buttons the block of code is finished. Im struggling to find a way in which this can be achieved becasue right now the block below will be an infinite loop when i want it to be only executed through once.

int rand=random()%5;

switch (rand) {
    case 1:{            

        [UIView beginAnimations:NULL context:NULL];
        [UIView setAnimationDuration:5.0];
        [btnYellow setAlpha:0.5];
        [btnYellow setAlpha:1];
        [UIView commitAnimations];

    }
        break;

    case 2:
        [UIView beginAnimations:NULL context:NULL];
        [UIView setAnimationDuration:5.0]; 

        [btnRed setAlpha:0.5];

        [btnRed setAlpha:1];
        [UIView commitAnimations];

        break;

    case 3:

        [UIView beginAnimations:NULL context:NULL];
        [UIView setAnimationDuration:5.0]; 
        [btnBlue setAlpha:1];

        [UIView commitAnimations];

    case 4:

        [UIView beginAnimations:NULL context:NULL];
        [UIView setAnimationDuration:5.0]; 
        [btnGreen setAlpha:1];

        [UIView commitAnimations]; 
        break;

    case 5:

        [UIView beginAnimations:NULL context:NULL];
        [UIView setAnimationDuration:5.0];
        [btnYellow setAlpha:1];

        [UIView commitAnimations];
        break;

}

Answer 1

Well, I've been using this site for several years, and I was due for a nice thorough answer to give back.

I built a project and accomplished the functionality you desired. Some notes:

-The key is recursion! You need to animate the fade out (using the function I provided) and, upon completion, animating the fade back in using the same function. Once completed, exercise recursion and prepare to call itself (beginAnimations) until all ints=5.

-I decided to fade from 1->.5->1 because the .5 alpha was annoying me. Shouldn't be hard to switch that around if you want it reversed.

-To make sure no button fades more than fives times, you need to declare and increment an int corresponding to each button.

-Use arc4random(), not random(). Random is for debugging as you will have the same result every time.

-Keep your switch case's straight; was hard to understand what you wanted to be different between them. On this note, use breaks and a default statement! Good luck employing all this into your app.

.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.view setBackgroundColor:[UIColor blackColor]];

    //declare and define button specifics
    btnYellow = [UIButton buttonWithType: UIButtonTypeCustom];
    [btnYellow setBackgroundColor: [UIColor yellowColor]];
    btnYellow = [self buttonTraits:btnYellow];
    [btnYellow setFrame: CGRectMake(20, 20, 280, 30)];
    [btnYellow setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btnYellow.titleLabel setFont:[UIFont boldSystemFontOfSize:14]];
    btnRed = [UIButton buttonWithType: UIButtonTypeCustom];
    [btnRed setBackgroundColor: [UIColor redColor]];
    [btnRed setFrame: CGRectMake(20, 60, 280, 30)];
    [btnRed setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btnRed.titleLabel setFont:[UIFont boldSystemFontOfSize:14]];
    btnBlue = [UIButton buttonWithType: UIButtonTypeCustom];
    [btnBlue setFrame: CGRectMake(20, 100, 280, 30)];
    [btnBlue setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btnBlue.titleLabel setFont:[UIFont boldSystemFontOfSize:14]];
    [btnBlue setBackgroundColor: [UIColor blueColor]];
    btnGreen = [UIButton buttonWithType: UIButtonTypeCustom];
    [btnGreen setFrame: CGRectMake(20, 140, 280, 30)];
    [btnGreen setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btnGreen.titleLabel setFont:[UIFont boldSystemFontOfSize:14]];
    [btnGreen setBackgroundColor: [UIColor greenColor]];

    //add buttons to the view
    [self.view addSubview:btnYellow];
    [self.view addSubview:btnRed];
    [self.view addSubview:btnBlue];
    [self.view addSubview:btnGreen];

    //set the counting ints to 0
    yellowCount = 0, redCount = 0, blueCount = 0, greenCount = 0;

    //run through the animations the first time
    [self beginAnimations];
}

-(void)beginAnimations
{
    if (!(yellowCount==5 && redCount==5 && blueCount == 5 && greenCount == 5))
    {
        //if you want 5 buttons, define another one, then the next line would be int rand=random()%6;
        int rand=((arc4random()%5)+1); //arc4random gives 0-3; add 1 for 1-4
        switch (rand) {
            case 1:
            {
                //make sure this button hasn't gone through the process 5 times already
                if (yellowCount<5)
                {
                    //increment the button's count
                    yellowCount++;
                    //set up animation with 1.5 second duration (alpha decline from 1->.5)
                    [UIView animateWithDuration:1.5 delay:0 options: UIViewAnimationOptionCurveEaseOut animations:^{
                        [btnYellow setAlpha:.5];
                    } completion:^(BOOL finished)
                    {
                        if(finished==TRUE)
                        {
                            [UIView animateWithDuration:1.5 delay:0 options: UIViewAnimationOptionCurveEaseOut animations:^{
                                [btnYellow setAlpha:1];
                            } completion:^(BOOL finished) {
                                if(finished==TRUE)
                                {
                                    [self beginAnimations];
                                }
                            }];
                        }
                    }];
                }
                else
                {
                    //restart the animation hoping to get another button that hasn't gone 5 times yet
                    [self beginAnimations];
                }
            }
                break; //you forgot a break here. can cause troubles
            case 2:
            {
                if (redCount<5)
                {
                    redCount++;
                    [UIView animateWithDuration:1.5 delay:0 options: UIViewAnimationOptionCurveEaseOut animations:^
                    {
                        [btnRed setAlpha:.5];
                    } completion:^(BOOL finished)
                    {
                        if(finished==TRUE)
                        {
                            [UIView animateWithDuration:1.5 delay:0 options: UIViewAnimationOptionCurveEaseOut animations:^{
                                [btnRed setAlpha:1];
                            } completion:^(BOOL finished) {
                                if(finished==TRUE)
                                {
                                    [self beginAnimations];
                                }
                            }];
                        }
                    }];
                }
                else
                {
                    [self beginAnimations];
                }
            }
                break;
            case 3:
            {
                if (blueCount<5)
                {
                    blueCount++;
                    [UIView animateWithDuration:1.5 delay:0 options: UIViewAnimationOptionCurveEaseOut animations:^
                    {
                        [btnBlue setAlpha:.5];
                    } completion:^(BOOL finished)
                    {
                        if(finished==TRUE)
                        {
                            [UIView animateWithDuration:1.5 delay:0 options: UIViewAnimationOptionCurveEaseOut animations:^{
                                [btnBlue setAlpha:1];
                        } completion:^(BOOL finished) {
                                if(finished==TRUE)
                                {
                                    [self beginAnimations];
                                }
                            }];
                        }
                    }];
                }
                else
                {
                    [self beginAnimations];
                }
            }
                break; //you forgot another break here. can cause troubles

            case 4:
            {
                if (greenCount<5)
                {
                    greenCount++;
                    [UIView animateWithDuration:1.5 delay:0 options: UIViewAnimationOptionCurveEaseOut animations:^
                    {
                        [btnGreen setAlpha:.5];
                    } completion:^(BOOL finished)
                    {
                        if(finished==TRUE)
                        {
                            [UIView animateWithDuration:1.5 delay:0 options: UIViewAnimationOptionCurveEaseOut animations:^{
                                [btnGreen setAlpha:1];
                            } completion:^(BOOL finished) {
                                if(finished==TRUE)
                                {
                                    [self beginAnimations];
                                }
                            }];
                        }
                    }];
                }
                else
                {
                    [self beginAnimations];
                }
            }
                break;
            default:
            {
                //in case of an awry number, restart the process (be wary; infinite loop potential)
                [self beginAnimations];
            }
                break; //it is of good practice to always have a default method in switch statements
        }
    }
    else
    {
        //the process is complete
    }
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

{
    UIButton *btnYellow;
    UIButton *btnRed;
    UIButton *btnBlue;
    UIButton *btnGreen;

    int yellowCount;
    int redCount;
    int blueCount;
    int greenCount;
}

@end

Answer 2

As you are setting up the button's alpha to 0.5 and then to 1 immediately, the button's alpha won't animate. You can get an idea this snippet

[UIView animateWithDuration:0.3 animations:^{
    [your_btn setAlpha:0.5];
} completion:^(BOOL finished) {
    if(finished)
        [self performSelector:@selector(revertAlphaToOne) withObject:nil afterDelay:0.5];
}];

And in that revertAlphaToOne Method, you can revert the button's alpha to 1 as

 [UIView animateWithDuration:0.3 animations:^{
    [your_btn setAlpha:1.0];
} completion:nil
}];

Adjust the time variables according to your likings And/Or call the second snippet in the first block's completion block itself.

Answer 3

The problem is that in cases 1 and 2, you set the alpha value to 0.5 and then IMMEDIATELY back to 1. So when the animation starts, it is simply 1 and will remain so. Just delete the 2nd assignment, and the animation will change alpha to 0.5. PS: As already mentioned, the random number generated is from 0 to 4, and not from 1 to 5.