How to open padlock or UIView Animations are fun!

UIView animations are a very powerful tool and you can achieve some great results. At the same time they are very easy to use.

So, for one of our apps we wanted to show a nice unlock animation after a user has patiently watched an interstitial ad. Something not very distracting, some sort of visual reward and also an indication that something is happening. Designer came out with a nice padlock opening animation.

Here is this animation, enlarged and slowed down:

When you look at an animation you are going to implement, it helps to understand what are the basic things that are happening here. If we try to split this animation into separate parts we will see that:

  • the top part of the padlock moves separately (the unlocking movement)
  • the whole padlock rotates to the right and then to the left
  • the whole circle scales down, then up in and then down a bit and stays like this
  • at the end it all fades out (that should be the easiest one)

The only tricky part here is how to move the top part of the padlock move separately from the bottom part. I solved this by using two separate images for two parts of the padlock.

Setup

I used png images for the upper and for the bottom part of the padlock. The animation will be more smooth if you use vector images or just draw them in the code.

Images for parts of the lock

In case you wonder why the top part of the padlock looks so weird, it is because of the way it rotates. If you look closely, before the lock actually opens, there is a small “click”, so one side of the shackle must be a bit longer. Extra white space at the bottom is also used in rotating animations.

If I wouldn’t do that, the animation would look like this:

Now the top image doesn’t overlap with the bottom image because it is additionally wrapped in a container that clips it.

Opacity and circle shape are done in code. The whole structure is inside of the semi-transparent circle view:

Wrapper for circle shape and opacity
Animation without wrapper

And here is the rest of the setup:

Padlock moving parts

Once you come up with this setup, the rest is very basic. Lets go through the animations we need and add them one by one.

Unlock

The top parts rotates a tiny bit to the right and then to the left:

Unlock animation

Here is the result:

Unlock animation in action

Looks rather dull, doesn’t it? Lets add some action by rotating the padlock!

Rotation

We want our padlock to follow the movement of the shackle, so that it rotates first a bit to the right and then to the left.

Let’s add some rotation!

Mmm, not exactly what we were hoping for. Now the image doesn’t look balanced anymore, padlock looks shifted too much to the top left corner. What we need is add translation as well:

Rotate AND Translate

And the result is:

Updated rotation animation

Scaling

Last thing we need to add is some scaling. The whole circle should shrink a bit first, together with the “click” effect animations, then become bigger for a moment and a bit smaller again.

Scaling

Once all animations are done, we can add some fade out and it’s ready!

Tadaa!

You can check the playground code here: https://github.com/mpostupaeva/padlockanimation

I made this animation about a year ago and now there are of course all those fancy tools for designers that produce an actual swift code. They make our life a lot easier. But sometimes making an animation yourself is a lot of fun, I hope now you also think so! :)