Login — UIView Animations Part 2
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.

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
