How to change background color of view smoothly

Question

I have 10 images and I need the color of background to be changed randomly at every 4 seconds with smooth animation.

my code is

self.bgTimer = [NSTimer scheduledTimerWithTimeInterval: 4.0 target: self
                        selector: @selector(updateViewBackground)
                        userInfo: nil repeats: YES]; 

self.bgTimer is a NSTimer property.

and the method for changing background is

- (void)updateViewBackground {
int randomNumber = arc4random_uniform(10);
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:[NSString stringWithFormat:@"random_bg_%i",randomNumber]]];
}

its changing the background according to the selected random image but it changes the background suddenly.

I need the color to be changed smoothly (will take 2 seconds in changing like a fade or cross dissolve).

how to achieve this.

and also is there a better approach to do this instead of this NSTimer method.

Answer 1

try it with this one..

- (void)updateViewBackground {
    CATransition *animation = [CATransition animation];
    [animation setDelegate:self];
    [animation setType:kCATransitionFromBottom];
    [animation setDuration:1.0];
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [[self.view layer] addAnimation:animation forKey:@"transitionViewAnimation"];
    int randomNumber = arc4random_uniform(10);
    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:[NSString stringWithFormat:@"random_bg_%i",randomNumber]]];
}

OR

- (void)updateViewBackground {
        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDuration:0.3];
        int randomNumber = arc4random_uniform(10);
        self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:[NSString stringWithFormat:@"random_bg_%i",randomNumber]]];
        [UIView commitAnimations];
}

Answer 2

Try this if you looking to change color with animation like.

    - (void)updateViewBackground {
    int randomNumber = arc4random_uniform(10);
    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH,  0ul);
    dispatch_async(queue, ^{
        dispatch_sync(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
            [UIView transitionWithView:self.view duration:7.25 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
                self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:[NSString stringWithFormat:@"random_bg_%i",randomNumber]]];
            } completion:nil];
        });
    });
}

If you looking animation more slow then increase duration time.

Answer 3

You are using right function but only you have to mention the image name.

- (void)updateViewBackground  {
    int randomNumber = arc4random_uniform(10);
    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:[NSString stringWithFormat:@"random_bg_%i.png",randomNumber]]];
}

Answer 4

To stop the images changing suddenly you need to animate the change -[UIView animateWithDuration: animations:] is what you're looking for. Here's a small code sample:

self.view.backgroundColor = [UIColor redColor];

[UIView animateWithDuration:1.0 animations ^{
    self.view.backgroundColor = [UIColor greenColor];
}];

Obviously you'll need to edit this to fit your code, etc. Hope it helps!

EDIT: Here's a link to the Class Reference incase you want to read up about it!