Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IOS 7 Weather APP Like Transition/Animations

Tags:

ios7

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 left and right transitions. Please let me know how can I implement that.

Thanks in Advance.

like image 768
Adil Fazal Avatar asked Mar 22 '23 05:03

Adil Fazal


1 Answers

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.

like image 151
Vinzzz Avatar answered Apr 02 '23 12:04

Vinzzz