iOS - Smooth Color Change Transition/Animation

Question

I want to have a smooth color transition that goes across the entire spectrum (i.e. red, blue, green, yellow, orange, etc.)

Also want to be able to have smooth transitions of colors in specific spectrum (i.e. all reds).

Are there any simple algorithms/recursive functions/formulas that can help simplify this process?

Answer 1

One very simple way to accomplish this would be to use a UIView animation block.

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

This will interpolate between whatever view's previous background color was, and red over the course of 1 second.

Swift:

UIView.animate(withDuration: 1.0) { 
    view.backgroundColor = .red
}

Answer 2

Use following code for color transition in iOS, it gives you various configureable options:
1) Delay before starting animation
2) Callback on animation completion
3) Options for animation

[UIView animateWithDuration:1.0 delay:0.2 options:0 animations:^{
        view.backgroundColor = [UIColor greenColor];
    } completion:^(BOOL finished)
     {
         NSLog(@"Color transformation Completed");
     }];

For Detailed description of different animations please visit:
UIView Tutorial for iOS: How To Use UIView Animation

Answer 3

One possible way of doing it is apply background color animation on view's layer.

Now to pass through entire spectrum you have to work on combinations of three colors.

The best way to achieve this is to use 'Hue'.

[[UIColor alloc] initWithHue:135/360.0f saturation:1 brightness:1 alpha:1]

Now you have to iterate for all Hue values and you will get the smooth transition that goes across all the spectrum.

Sample code:

1. make a local variable

int _currentColorHue = 0;

2. recursive call for change background color.

-(void)animateMyView {

[UIView animateWithDuration:0.01 animations:^{
    self.view.layer.backgroundColor = [[UIColor alloc] initWithHue:_currentColorHue/360.0f saturation:1 brightness:1 alpha:1].CGColor;
} completion:^(BOOL finished)
{
    _currentColorHue++;
    if (_currentColorHue > 360)
    {
        _currentColorHue = 0;
    }
    [self animateMyView];
}];
}

You can stop the animation according to your use.