Creating a custom loading animation with PaintCode and Swift

Introduction

If you are not familiar with PaintCode – it’s a widely used and very useful little program, that can save you a lot of programming time for simple things like a logo animation. It’s main idea is that you draw a canvas that the app then turns into code.

Here is there website, if you would like to check them out: PaintCode , current price right now is $99, which I think it’s worth it. You could also download a trial version.

There is a lot you can do with PC, you could animate stuff and it’s very simple to implement in iOS development and Swift, and that’s how is done in the companies too, recruiters often hire developers on LinkedIn for big outsourcing project from top tech firms like Google, Amazon, Microsoft and more.

For this little tutorial we’ll go over creating a simple loading animation.

PaintCode stuff

I’ve create a very simple canvas, basically added 4 ovals, stroke only, then used the Oval options on the right to change the start and end of each one, so they are only a quarter of the circle ( 90 degrees ), unchecked  ‘closed’ , so it’s just the outside wall. Then I added some shadow and a grayish oval in the middle with low opacity, only fill and no stroke.

You can create the same, similar or something totally different.
The trick to animate it now is in the variables in the bottom left. For the purpose of this tutorial I want each of the circles to turn around, essentially 360 degrees. So we create 4 variables on the left , of type Expression.
Since I want to move all of them at the same time I’ll create another variable, called Master, which is just going to be a Fraction, or with other words – between 0.0 and 1.0 . Then we tie all the angles with the master ( make sure you offset each colored circle by the additional 90 degrees ):

Now if you play around with the Master slider you should see all the circles animate accordingly:

You can directly the code from within PaintCode for this one, but usually you would just go to File > Export… then do StyleKit:

Xcode stuff

Now create a new XCode project > Single Page App:

Drag the CircleLoad.swift file into your project. Here is mine:

Feel free to use this one or the one you create. As you can see the export file is a subclass of NSObject and it’s using CoreGraphics to draw everything.
We need to create a custom UIView, that can use this NSObject class as a drawing method.
So, create a new file, CocoaTouchClass, subclass of UIView ( I named mine CircleView ).
Here is the code for this – it’s very simple:

What we are doing is overriding the default drawRect method of UIView with the newly create drawing method from PaintCode. However I added a variable masterSlider, because we’ll need a way to control it from outside.
Now add a new UIView to your UIViewController and two UIButtons. Make the view a subclass of our
new ‘CircleView’ class:

Also drag IBOutlet for the CircleView and an IBAction for each of the buttons.

Here would be a good time to talk about how we are going to animate this.
The idea is that we can call ‘circleLoad.masterSlider = 0.5’ and this should animate our new CircleView, however we need to tell the View that it needs to redraw. How you do that is by calling: ‘circleLoad.setNeedsDisplay()’
So in theory you should be able to do a ‘for loop’ or ‘while loop’, something like:

However, if you try something like this, you will see that it will not work.
The masterSlider will be changed every time, but the setNeedsDisplay() will be called only one time. This is how this was designed by Apple and there are different workarounds, but here is how we are going to do it – using NSTimer. Let’s add a few variables in your UIViewController:

• ‘timer‘ – will be our NSTimer, responsible for updating the View
• ‘timerOn‘ – will be used to check if the timer is running, as we don’t want to start it twice
• ‘current‘ – will be a local variable to save the masterSlider current value
• ‘limit‘ – will be used in case you want a limit for the masterSlider

Let’s create our animation function:

Pretty straight forward – set the view’s masterSlider to whatever the current offset is, redraw and increase the current by the step that I chose of 0.05 ( the smaller the step, the smoother the animation )
Now let’s create a new function to fire off the NSTimer:

First we check if our Timer is already running, if not – then start it and repeat it every 0.1s ( feel free to change the repeat interval ), if yes – just print some system error or anything else that you would like.
One thing to make sure is that in the Selector(“FUNCTION NAME”) , the FUNCTION NAME is exactly the name of your startAnimation function, were you to name it something different.
Now let’s finish by creating a function to stop the timer:

Finally call the correct functions inside each button action:

Run your project and you should have a nice loading animation like this:

There is a lot more you can do with PaintCode, but this should get you started 🙂
If you have any questions, please post them below.
You can find the full project here at my GitHub repo: LoadingLikeABoss

Cheers!