What is Transition Animation and its overview

Avinash Yegi

Animations …!! Sounds scary ?? Don’t worry, this definitely excites once you cross the initial hurdle.There’s a saying “It’s okay to be scared.Being scared means you’re about to do something really, let’s really brave”let’s get started to do a simple transition animation.

giphy
This application has a list view on tap of which profile image of the selected cell starts expanding to navigate to the detail page. Open Xcode and create a Single View Application, let’s name it as Transition Animation Demo.Open the Main.storyboard and create a view controller

storyboard_image

So now we need a list view to display the list of items which we will achieve it by creating a tableview. Create a view controller which implements tableview delegate and datasource. Implement the following tableview delegate methods:

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
// Here we are returning 5 rows to show five items in list.
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let tableviewCell :ListTableviewCell = tableView.dequeueReusableCellWithIdentifier(“ListTableviewCell”) as! ListTableviewCell
return tableviewCell
//Here we are constructing table view cell which identifier is “ListTableviewCell” to show the each item in list.
}

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let Storyboard : UIStoryboard = UIStoryboard.init(name:”Main”, bundle: nil)
let DetailScreen:DetailViewController = Storyboard.instantiateViewControllerWithIdentifier(“DetailViewController”) as! DetailViewController
DetailScreen.yPosition = CGFloat(indexPath.row * 75)
self.navigationController?.pushViewController(DetailScreen, animated: false)

// In this method we are creating detailViewController and whenever user taps on any of the list item we are pushing , detail view controller will show the profile image expanding animation. We are passing one value to detail view controller which is named as yPosition. This value determines the cell item Y-Position from where it should start expanding the profile image.
}

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 75
// This method returning the row height. This method determines the height of the each item which we are showing in list items
}
In above delegate methods we are constructing a table view which has five rows and each row will be having one imageview.

Now create one view controller, name it as DetailViewController. In DetailViewController place one image view and one view. Now give proper constraint for the image view and view.The purpose of view which we are using as container view is to determine that, till what height image should expand with the animation. Create outlets for image view constraints which we are using for animation. So now, we will create three properties for constraints which we are naming them as mainViewConstraint, heightConstraint, widthConstraint.

The mainViewConstraint property is for container view top constraint, the heightConstraint property is for profile image view height constraint and width constraint property is for profile image view width constraint. We have created properties for constraints now just simply link them properly.

Now add the following methods in DetailViewController.

override func viewDidLoad() {
super.viewDidLoad()
mainViewConstraint.constant = yPosition
let backButton:UIBarButtonItem = UIBarButtonItem.init(title: “back”, style: UIBarButtonItemStyle.Bordered, target: self, action:#selector(handleBack))
self.navigationItem.leftBarButtonItem = backButton
}

override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
mainViewConstraint.constant = 0
heightConstraint.constant = mainView.frame.height
widthConstraint.constant = mainView.frame.width
UIView.animateWithDuration(0.5, animations: {
self.view.layoutIfNeeded()
})
}

func handleBack() -> Void {
mainViewConstraint.constant = yPosition
heightConstraint.constant = 75
widthConstraint.constant = 70
UIView.animateWithDuration(0.5, animations: {
self.view.layoutIfNeeded()
}) { (Bool) in
self.navigationController?.popViewControllerAnimated(false)
}
}

In viewDidLoad method we are adding back button to navigation bar on tap of that we are handling action in handleBack method. Back button is to navigate back to list view with the proper animation. As mentioned earlier we are updating the top constraint of container view with the value of yPosition so that the profile image start expanding from selected item Y-Position.

Now we are ready to go ahead with the animation we are looking for. The outlets we have created for constraints will play most important role in animation. So before we go ahead just verify once that we have given proper constraints for image view and created outlets for those constraints and linked properly. In viewDidAppear method, we are just updating the constraints and setting the layout in animation block that’s all…!!!!

In handleBack method just resize the image view with respect to the previous size so that whenever you press back button the animation should repeat by resizing the image.

about the author

Avinash Yegi