How to animate gradient moving up on iOS

Question

I want to mimic the "Want" iPhone app background, there are 3 colors that I want a view to cycle through, let us say red, blue, and green.

I want there to be a gradient with red to blue to green, each 1/3 of the screen, faded into each other (gradient), then, I want the red to go off screen on the top and come back on the bottom. (See photos below...)

The animation should move up, I want the gradient to go up and reform at the bottom of the screen and go up.

I tried using CAGradientLayer and animating the "colors" property, but that just looks like everything fades into each other, not necessarily moving off screen.

Contemplating using OpenGL, but don't want to go that low for something that seems pretty simple. Any help/code samples would be much appreciated. I basically need help animating a gradient using CoreAnimation/CoreGraphics.

Thanks in advance!

Answer 1

Animating the colors property of a CAGradientLayer will just cause a fade, as you've discovered. However I think a gradient layer is the way to go. You should look at the following options:

• animating the positions property as well as / instead of the colors.
• creating a larger gradient layer that contains your full animation cycle and animating its position

The second option will probably give the best performance as the gradient will not need to be recalculated.