Guide to Advanced iOS Animations through Auto Layout

Auto Layout is very powerful tool to control every view layouts in iOS. In case it is not used directly, the OS will auto transforms the view’s properties like the frame into constraints before laying out the views.

Auto Layout and Animation
Auto Layout is recommended for all the projects as due to its visual nature it can be easily adjusted when working on a view especially in one that you haven’t create. It is though a bit rigid and animations are very important in iOS so we need to figure out different ways to implement different types of animations while using the Auto Layout.

Animating with Constraints
By using constraints we can smartly implement animations with Auto Layout. It is possible to modify the constraints of the view be it by changing the constant property, by creating or deleting constraints or even by calling layoutIfNeeded() within the animation block as below:

// Constraints can be either connected through Interface Builder as outlets

// or created at runtime

var heightConstraint: NSLayoutConstraint!

…

heightConstraint.constant = 100

UIView.animate(withDuration: 0.25) {

   self.view.layoutIfNeeded()

}

The more advanced the animation get the more constraints you need to keep track and manage. Consider you have to animate the red box to a different location where every position is part of the layout and affects other views. You will require four constraints to lay out a view means you now have eight constraints to be tracked four for every position.

Animating with Transform
Implementation the  transform property of a UIView is an excellent  way to easily create simple animations that won’t modify the layout of the screen. CGAffineTransforms support translation, rotation, scale, as well as any combination of them. The best case for transform animations are with views that never change position but do have an animation. If you are unable to visualise it, imagine a view that won’t change its position once it’s in the place yet can slide in from the top when the view first appears.

In order to animate the transition use the transform to translate the view off the screen before it appears and on the screen once it appears.

func viewWillAppear(_ animated: Bool){

   …

   contentView.transform = CGAffineTransform(translationX: 0, y: -contentView.frame.height)

}

func viewDidAppear(_ animated: Bool) {

   …

   UIView.animate(withDuration: 0.25) {

       contentView.transform = .identity

   }

}

Other properties like the alpha or scale and rotate the view can also be mixed. There are multiple other use cases for this type of animation like wiggling icons, make the button bounce on tapping or shaking a text field if its contents unable to pass the required validation.

In this animation there are three animated elements that are present in both compact and expanded states the playback button, the artwork, and the playback bars. In these elements the playback button and the image view play major role in every layout. If we tried to use constraints above mentioned to perform this transition it will be required to keep track of dozens of constraints. Still you want to traverse that route then we would lose the ability to have the transition follow the user input.

Animation implemented is easier than it seems. We created a container view first in our controller for every state. Each container has a static layout with all elements that couldn’t be animated. In each container invisible views were created that represented the frame of all animated element in that state. These views further helped in creation of the layout like the element was there. Now we included the actual elements to our main view. These views were constraints free as we have set their frame manually. With all the views in place, we connected it all with three IBOutlets for each element: compactReferenceView, expandedReferenceView, and elementView.

Image credit: savvyapps.com 

Hopefully, above information will be helpful in gaining information regarding How do Advanced iOS Animations through Auto Layout. Looking forward to listen to your views and query regarding the same.

A user-oriented solution on cutting edge technology to engage customers or boost your brand to eventually edge out your competitor and realize the potential and importance of  latest online business solution in various domain to ensure stability and rocket sky the ROI. Singsys boasts best-fit developers, designers that were key to partner with multiple Fortune 500 firms to deliver industry oriented web, mobile and e-commerce solution always.

You may be interested in following:

1. iOS Application Battery Optimization Techniques to Minimize Burden on Battery
2. Apple Developer Account Creation Step by Step