Animations challenges #2 — Asana Loader animation

Animations challenges is actually pretty fun. It’s about picking a random animation in one of the app that we use everyday ( twitter, Facebook, Slack, others .. ) and try to recreate it together by doing Pair Programming.

Animations are very funny. When you look at them, they look very simple, but when you try to look closer, you will notice that it involves many changes/sub-animations under the hood, making the end result amazing and almost unnoticed.

So the goal of those animations challenges is to try to analyse those animations and try to replicate them. After that, there will be a blog article showing how we approached this challenge.

If it’s the first article you see from me, you can check it out the cool article there about the Bear iOS app search animation:

Animations challenges #1 — Bear iOS Search animation

For this animation, I worked on it by myself, wihout John. This one is too easy for him 😚.

Introduction

The second animation I decided to reproduce within one hour ( but at the end within a few minutes ) was the loading animation from the Asana iOS app.

Asana iOS app

Let’s dive in

Observation #1 — A gradient of two colors: Pink and beige

First, we can see that there is probably two colors used in a horizontal gradient. How can we define this in code?

• We define a pink and a beige color
• We also create a gradient layer, aka CAGradientLayer.
• We create an empty setup function. We will get back to this function later. It will take care of setting up the gradient looks we want.

CAGradientLayer is a subclass of CALayer and allows you to create a color gradient with as many colors as you want. But by default, it spreads colors uniformly 😮. But wait! That’s not a problem. There are many customizables properties that allow you to create the gradient color of your dream. Among the properties that we will use, there are:

• startPoint and endPoint of the gradient. Basically it’s where the gradient starts and where it finishes. For exemple, a starting point of x=0.5,y=0 and an end point of x=0.5,y=1 means that the gradient will go from up to bottom. Another exemple: a starting point of x=0,y=0.5 and an end point of x=1,y=0.5 means that the gradient will go from left to right, etc..

So let’s set up the startPoint and the endPoint so that it will be a gradient that will go from left to right:

PS: I set up three colors on the gradient colors property, so that we can clearly see the gradient at the left and right side of the beige color.

If we run the app, it will appears that way:

• The locations. It’s an array of values that will indicate where the gradients colors stops. You can think of it as how much each color should fill the gradient. For exemple, if we want the beige color to be at the end of the gradient ( which is the second color in the array we gave to the gradient.colors property ), we can do something like:

And the result will be:

It’s because we say that the first color ( pink ) will stop at 70%, then the second color ( beige ) will start and finish at 90%, and then the rest will be filled by the third color ( beige ).

If our case, we suppose that the beige color start at the beggining of the gradient and will be animated over time, so let’s set it up:

Result of setup the beige gradient at the beginning

Observation #2 — The beige color position is changing over time

Beige color position changing over time

We can see that the beige color position is changing over time, so how can we do that?

Well, if you look at the locations property documentation, it says:

locations: An optional array of NSNumber objects defining the location of each gradient stop. Animatable. https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462410-locations

Animatable?? Wow! That’s amazing! It literally means that we can just change the locations property in a animation and the work will be done!

So let’s make it work right now!

To achieve that, we will use the convenient CABasicAnimation class that take care of animating CALayer properties very easily by defining a:

• fromValue: the starting value before the animation. In our case it’ll be the start position of our gradient colors ( the beige color starting at the beggining of the gradient ).
• toValue: the end value we want to reach at the end of the animation. In our case it’ll be the end position of our gradient colors ( the beige color moving at the end of the gradient )
• the property name
• any options you want

So , for this article, let’s start the animation when the view appear.

And create our startLoading() function:

• The CABasicAnimation takes into parameter the property name
• You can specify many things such as the duration of the animation or if your animation should loop using repeatCount
• The from and start value
• and more..

Let’s run the app.

Final result

Final result

✅ Good job for reading and reaching the end 💪

You can now reproduce a “similar” loading animation as the Asana iOS application

You learned that sometimes, something that looks like a challenge, once putting enough through on it, can be achieved without struggling too much.

This is the second animation challenge blog article I write. If it’s the first article you see from me, you can check it out the cool article about the Bear iOS app search animation.

There is going to be more! If you have any animations you would like to see how to built it, don’t hesitate to add comments below :).

You can find the full animation project there:

Aymenworks/AnimationsChallenge

If any questions, you can reach me or John on twitter anytime :).