The difference between animateWithDuration and transitionWithView

I am currently focusing my effort on learning how to create animations in iOS. I started reading and following along with Marin Todorov book, iOS Animations by Tutorials.

So far I am really enjoying the book. In an attempt to better understand the concepts in the book and make them stick in my head, I have been coding sample applications and plan on blogging on the subject. The first of these blog posts, based on a question which popped into my head, “what is the difference between animateWithDuration and transitionWithView?”

animateWithDuration

animateWithDuration(_:animations:) is a class method allowing you to animate views within it’s animations closure. Sounds more complex than it is:

UIView.animateWithDuration(0.5, animations: {
  self.title.center.x += self.view.bounds.width
})

Typically before the main view is displayed you set the view you want to animate into its starting state. In this case, we want to animate the title view onto the screen so within viewWillAppear() move the title view off the screen:

override func viewWillAppear() {
  super.viewWillAppear()

  self.title.x -= view.bounds.width
}

If the animation requires you to animate multiple views simultaneously then you can use the animations closure method to animate multiple views simultaneously.

UIView.animateWithDuration(0.5, animations: {
  self.title.center.x += self.view.bounds.width
  self.description.center.x += self.view.bounds.width
})

The animateWithDuration(_:animations:) method animates the view immediately using the UIViewAnimationOptionCurveEaseInOut and UIViewAnimationOptionTransitionNone animation opitions.

There are other variations of the animateWithDuration class method which allow you to delay the start of the animation and take action when the animation completes.

  • animateWithDuration(_:delay:options:animations:completion:)
  • animateWithDuration(_:animations:completion:)
  • animateWithDuration(_:animations:)

Animatable properties of a UIView

animateWithDuration allows you to animate the following properties of a UIView:

Property Changes you can make
Frame Modify this property to change the view’s size and position relative to its superview’s coordinate system. (If the transform property does not contain the identity transform, modify the bounds or center properties instead.)
bounds Modify this property to change the view’s size.
center Modify this property to change the view’s position relative to its superview’s coordinate system.
transform Modify this property to scale, rotate, or translate the view relative to its center point. Transformations using this property are always performed in 2D space. (To perform 3D transformations, you must animate the view’s layer object using Core Animation.)
alpha Modify this property to gradually change the transparency of the view.
backgroundColor Modify this property to change the view’s background color.
contentStretch Modify this property to change the way the view’s contents are stretched to fill the available space.

transitionWithView

animateWithDuration(_:animations:) animates the animatable properties of a UIView, whereas transitionWithView(_:duration:options:animations:completion:) animates the addition or removal of a view.

It is possible to animate the addition and removal of views using the animateWithDuration class methods but transitionWithView(:_duration:options:animations:completion:) allows you to apply pre-defined transitions to animate any set of changes to your view.

The method transitionWithView(_:duration:options:animations:completion:) takes an extra parameter view when compared to animateWithDuration(_delay:options:animations:completion:). The view passed in serves as a container for the transition animation.

UIView.transitionWithView(animationContainerView!, 
  duration: 0.33,
  options: [.CurveEaseOut, .TransitionFlipFromTop], 
  animations: {
    self.animationContainerView!.addSubview(newView) 
}, completion: nil)

iOS Animations by Tutorials provides a number of examples covering common actions such as: “adding a new view”, “removing a view”, “hiding/ showing a view”, and “replacing a view with another view”.

Predefined transition animation options

The transitionWithView(_:duration:options:animations:completion”) class method has a number of predefined transition animation options. I have listed these options below:

  • .TransitionFlipFromLeft
  • .TransitionFlipFromRight
  • .TransitionCurlUp
  • .TransitionCurlDown
  • .TransitionCrossDissolve
  • .TransitionFlipFromTop
  • .TransitionFlipFromBottom

Summary

So in summary, animateWithDuration allows you to animate a UIView’s animatable properties. You can animate as many UIView’s animatable properties as you wish within the animateWithDuration’s animation closure method. transitionWithView on the other hand uses a containing view to animate the addition or removal of a view. These animations use predefined transitions which you set within the options parameter.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *