IOS 7 Weather APP Like Transition/Animations

Question

I would like to implement IOS Weather APP like transition, ListView, tap on list item it expands to detail view, or pinch to list also expands to detail view.

Slide lef

Answer 1

You can definitely pull this off with the transitioning api.

Check out this project, I think it will help:

https://github.com/chefnobody/Colors

I was able to do it using this example from Ash Furrow @ Teehan + Lax: http://www.teehanlax.com/blog/custom-uiviewcontroller-transitions/ with some modifications:

To augment this example to get the pinch/pull table view cell separation animation you would need to identify the table view cell that was selected (or "selected" relative to the pinch gesture"), then in -animateTransition: you animate the actual table view cells above and below the selected cell out of view, revealing your details view controller. Remember, also to animate back to the table view from the details you need to (during the "pop") know which cell would be selected (scrolling it back into view if it's not already in view) then animate the cells surrounding it from off screen, back into view.

As for the swipe interaction between the different cities you would implement a different InteractionController that handles the transitions there. Again, you can probably follow Furrow's example and figure out how to pull it off.

Answer 2

Here is some post on a blog I found that explains Apple new Transitioning API on iOS 7, go through it, read it.

---

In short lines, here are the steps

1 - Set a transition delegate on a controller

There are 3 types of transitions you might want to customise :

• UINavigationController push & pop transitions
• UItabBarController tab changed transitions
• any modal presentation with presentViewController:animated

Each of these 3 cases offers its own 'transition delegate' protocol :

• UINavigationControllerDelegate
• UITabBarControllerDelegate
• UIViewControllerTransitioningDelegate

When, from somewhere in your code, you use the methods for presentation :

• pushViewController:animated: or popViewControllerAnimated:
• setViewControllers:animated:
• presentViewController:animated

Then, these delegates asks for what I call an 'animator' if an animation is required.

What I'm calling an 'animator' is an object conforming to protocol <UIViewControllerAnimatedTransitioning> (or <UIViewControllerInteractiveTransitioning> in case of interactive transition, like gesture driven interactions). This decouples the animation from your UIViewControllers (which might already have plenty of code inside)

2 - Write the 'animator'

This is the object responsible for animating transition. This can be a viewController, or a completely new NSObject.

In case of a UINavigationController, you could define different animators for push and pop operation.

3 - add the properties you need for your animation into your animator, and code the animation

The 'animator' might implement different protocols, depending on which transition you're trying to customise. In case of non interactive animations, these are the methods :

• - (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext : define the duration of animation

• - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext this is where the beef goes. See the example code in link above,

• - (void)animationEnded:(BOOL)transitionCompleted for any clean-up after your animation was played.

---

In your case, you might want to add some 'origin' and 'target' UIView properties in your animator class (as weak properties of course !)

Then, when you detect 'which' view was tapped by user. (in your UITableVIewDelegate or UICollectionViewDelegate didSelect methods), you tell your animator so that it can animate with THAT specific frame, then call the 'push', 'pop' or 'presentViewController' , depending on your navigation logic.