Login — UIView Animations Part 2

Camilo López
Jul 25, 2017 · 4 min read

Motivated by my last post and willing to accomplish my duty with you, I started to create the second part of animation tutorials.

In my last post, I explained how to create an intro animation with Lottie and it was really easy because the library is pretty simple to use, thanks to airbnb team.

Before start this tutorial, we have to know some terms in order to create animations programmatically with no libraries.

Glossary

I suppose you’re acquainted about UIView class, otherwise don’t worry, just keep reading.

UIView

An object that manages the content for a rectangular area on the screen.

Bounds

The bounds rectangle, which describes the view’s location and size in its own coordinate system.

The default value of UIView.bounds will be (0,0,width,height).

Note: Width and height are Float numbers

Frame

The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.

Center

The center of the frame.

So, Let’s get started

First of all we are going to create our interface via storyboard (if you prefer make it by code, the process will be the same)

Add a new empty viewController to your storyboard

Let’s to create our login.swift. I ever try to use Cocoa Touch Class because it’s a simple way to get a empty template of viewController class.

We need to link the UI to our class.

I have added a UILabel, two UITextfields and a UIButton, it looks something like this:

At this moment, we have a simple UIViewController with some UI Elements, and is in this part when magic happens.

What we gonna do?

We are going to animate all the UI elements changing its own properties.

UILabel: We gonna make a transition from the left to current UILabel position.

UITexfields: These gonna appear in a fadeIn transition.

UIButton: The last one, it is going to appear from the bottom to its current position but using fadeIn transition too.

It’s pretty important say that we are going to use Easing animation it’s a kind of animation math form for make transitions more coherent with reality.

taken from raywenderlich

Let’s to Animate using UIView.animate

We are going to avoid constrains in this tutorial but they are very important use them.

Ok, let’s do it

First of all, we have to save the current elements position. It will be useful.

If we want to change a position with no animations, we can do this

self.lblLogin.frame = CGRect(x: 0, y: self.lblLogin.layer.position.y, width: self.lblLogin.frame.size.width, height: self.lblLogin.frame.size.width)

I think it is very confusing. so, I have created this function in oder to make this process easier.

now, you can change position elements like this

self.position(self.lblLogin, x: 0, y: nil, hidden: true)

What this function does

view_: it’s a UI element which gonna changes it’s position

x: It’s a x in parent position but it could be null if you don’t want to change its value.

y: It’s a y in parent position but it could be null if you don’t want to change its value.

hidden: If you have a zero position but you don’t want your view to be watched, set hidden to true.

Then, out next step is: set initial position for all UI Elements.

And finally the animation

Full Login.swift file

Camilo López

Written by

A Web developer and currently focused on Mobile Development Swift/Java

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade