in iOS, tutorial

WakeUp’s background class

After releasing my first iOS app I have received so many questions about the background’s animations.
I don’t remember how I thought about all of this, the only thing I can say is that the background class is the result of changes, changes and more changes. I wanted something nice, something eye-catching and colorful.

Let’s start from the beginning.

How does it work

The background is made by 60 CALayers. Why 60? Well, my first idea was to play somehow with them each second (60 layers, 60 seconds), this is why I choose 60.
I am going to divide the animations in 2 groups:
1) Animation from strings to selected color
2) Animation from one color to another

Background animation1

animation2

Setup

Let’s write some code!
I am going to start with the setup of this class. This class is a subclass of UIView and it has 1 designated initializer:

The init method ALWAYS initializes the background with vertical strips (so they can match the splash screen).
In case ‘backgroundColor’ is nil, the vertical color bars remain on the screen until the user selects a color.

After having the size of each layer depending on the screen size, I use a for statement for locating each CALayer and adding them to a mutable array (this is very useful for animate them later).
You might have noticed I use “tile.tag” and “tile.initialPosition”. I did create a category to a CALayer for having this properties. It is not necessary but I found it easier for future animations.
For choosing the correct color for each CALayer, I check each horizontal position.

Animation 1

Now that we have all CALayers positioned we can animate them. This first animation could look quite easy but it is actually much more elaborate than the 2nd one.
Behind the scenes, what happens is:
1) User selects the color he/she wants.
2) The backgroundColor of the main view (this view is located behind the CALayers) changes its color to the selected one.
3) The selected vertical strip remains in place while all the other layers move horizontally out from the screen (layers on the left of the selected strip to the left, layers on the right to the right).
4) Once the layers are outside the screen, they change their color.
5) Once the layers have changed the color to match the selected one, they go back to their original position.

Let’s take a look at the code:

Here we have a method that does pretty much everything. It takes care of both animations. For this first one, it is a composition of 2 animations (a and b), and the animation b starts just after animation a finishes.
The animation a it’s just a small movement in the X axis towards the selected color to make the whole animation a bit more fun.

*** ATTENTION: this kind of behavior (small movement followed by a longer one to simulate a bit of bounciness) it is better to do it by CAKeyFrameAnimation. However, I did write this class a long time ago and I was not very confident with keyframe animations. I will post another tutorial talking in more detail about keyframe animations. ***

I want to talk about a few main points here.
1) I am not going to write the method selectPositionFromStringColor: here. I am happy to give it to you if needed, I am trying to make this as easy and understandable as possible. The only thing that this method does is return an integer based on the color selected (from 0 to 5).
2) The method setValue:forKey: it’s very useful as you will see below. We will use it to know when this animation has finished.
3) This ‘if’ method is checking the position of the layer and assigns an end position (toValue) based on it’s tag.
4) To add a delay to a CAAnimation or chain 2 different CABasicAnimations this is the best way I have found.

Finally, the delegate method. We get notified when the second animation (‘b’) ends, so we can change the color of each layer and send them back to their original position.

Animation 2

The second animation, the one triggered while the app is running for changing the background color. I did 4 or 5 different animations and I end up choosing that one. The code it’s very simple.

It is worth to mention that to achieve the random effect I actually “mix” the NSMutableArray before animation. There is a little for that does the trick of mixing the array.
After mixing the array, all code it’s pretty straight forward. The only thing that the code does is changing the color in 0.05 seconds after a certain delay.

I hope this kind of tutorial has given you a bit of inspiration and I also hope I have explained myself quite clear. Any question, and most important, any suggestion will be happily received :D.

Thanks for reading!

Leave a Reply