Hello Reader,

I am here to share my experience about a simple animation library(Not sure even if it should be called with this term),  i did during the Fontli development or to say exactly as Enhancement, yes we really revamped the entire app, if you haven’t looked into it for a long time, please go ahead now and am sure you’ll be thrilled to see the difference and for those who are new to the app itself, i hope they would surely find it interesting now.

Ok, enough of the backstage story, jumping right into the Crux of this article.

In our new iOS designs, our designer wanted to show a loader at the bottom of the Splash screen, which would run/fill-a-color(Of-course the Fontli’s Red Color) horizontally from left to right, which is very simple right?

Here’s quick snap of what i said above:

A small backstory again:

We usually have this concept of giving the deadline before starting off the development at any given point. So, while giving the timelines, I thought there would surely be some library which we can be just drag & dropped and just plug & played to accomplish this functionality. Thus, i ended up giving a very few timeline for this one.  (Flashback Ends Here)

But, unfortunately, i didn’t find any such library i’d thought of. Actually, its pretty simple one, hence may be no one thought of releasing it as a package, but i believe in my case i wanted it to get it done by simply just dragging a file into the project, which never happened, hence am releasing one here, so that anyone with the similar case as mine never finds it difficult at all.

There are several ways to accomplish this simplistic Horizontal filling loader animation, but here i have used

in conjunction with the Auto Layout constraints. I guess you’ve guessed the approach.

Yes, i just changed the trailing constraint of an internal stroke view and asked the loader’s containing UIView to update its layout. As simple as that.

 

PlainLoaderView:

(Very simple straight forward name la? 😉 )

Here’s how you can use this library in your project:

Import ‘PlainLoaderView.swift‘ file into your project.

 

Setting up ‘PlainLoaderView’ in your project:
Initialization:

 

To set the animation duration:

 

To change the loader view’s background & animation stroke colors respectively:

 

Finally add this line of code to start the animation:

 

Following the above steps, you should have achieved this:

Progressive Animation:

If you’re downloading a series of files and if need to animate in chunks to show the progress, then calculate the percentage and inform the loader on the same.

For Example, say you want to download ‘imagesCount’ number of images from the server and you’re saving those images into ‘imagesArray’ Array, then this is how you should calculate the percentage:

And assign it to the ‘PlainLoaderView’ with this line of code:

‘PlainLoaderView’ will automagically update the stroke progress with animation, just like it does in Fontli.

 

I have hosted the demo app using this library over GitHub.

Please do raise issues there, if you find any.

Thanks for taking time to read this soooo long article 😉

Kandippa(Surely in Tamil), will come up with something more interesting in the next blog 🙂