Creating an animated gradient background similar to the Solar Weather Application in xCode

Question

Even though I have asked this question before, I would like to reach out again to clarify what I would like to accomplish with your help. I was wondering how you would create a

Answer 1

What I need is:

1. adding a CAGradientLayer to your view controller (or custom view), e.g.:

   @property (nonatomic, retain) CAGradientLayer *gradient;
   

2. In your view controller, in viewDidLoad, create and add the gradient layer to your view:

   self.gradient = [CAGradientLayer layer];
   gradient.frame = self.view.bounds;
   gradient.colors = [NSArray arrayWithObjects:
                  (id)topColor.CGColor,
                  (id)bottomColor.CGColor,
                  nil];
   gradient.locations = [NSArray arrayWithObjects:
                     [NSNumber numberWithFloat:0.0f],
                     [NSNumber numberWithFloat:0.7],
                     nil];
   [self.view.layer addSublayer:self.gradient];
   

   3a. add an NSTimer to your controller that will update self.gradient at proper intervals by doing:

     topColor = ...; bottomColor = ...;
     NSArray* newColors = [NSArray arrayWithObjects:
                    (id)topColor.CGColor,
                    (id)bottomColor.CGColor,
                    nil];
    [(CAGradientLayer *)self.layer setColors:newColors];
   

   This will allow you to exactly decide which colour you want to use for the gradient at each step. Otherwise, you might try with an animation, like this:

   3b. add the animation like this,

   - (void)animateLayer... {
   
     [UIView animateWithDuration:duration 
                           delay:0
                         options:UIViewAnimationOptionCurveEaseInOut
                      animations:^{
       [CATransaction begin];
       [CATransaction setAnimationDuration:duration];
   
         topColor = ...; bottomColor = ...;
         NSArray* newColors = [NSArray arrayWithObjects:
                    (id)topColor.CGColor,
                    (id)bottomColor.CGColor,
                    nil];
        [(CAGradientLayer *)self.layer setColors:newColors];
   
        [CATransaction commit];
     }
             completion:^(BOOL b) {
                 [self animateLayer..];
             }];
   }
   

You might also combine 3a and 3b.