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:

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 agradient 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?