Wednesday, 24 September 2014

Animation from Button center with navigation


 Add an action for that buttons you want view animate from center.
   
@interface FirstViewController : UIViewController
{

}

- (IBAction) btnAction:(UIButton*)sender;

@end

  
Now write a method popUpView in FirstViewControoler implementation 

- (void)popUpView:(UIView*)subView fromPoint:(CGPoint)iconPoint
{

}

In this method we pass the view that we want to animate and center from which we want animation.
Now it times to add some code.

First we change the center of view that we want to animate and add it on view.

    subView.center = iconPoint;
    [self.view addSubview:subView];

 After that we transform it with less scale, so it seems shrinking and zooming during animation.

  subView.transform = CGAffineTransformMakeScale(0.05, 0.05);

Now add an animation with some duration that transform and set the frame of subView with screen bounds.

 [UIView animateWithDuration: 0.4
                          delay: 0
                        options: (UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction)
                     animations:^{
                         subView.transform = CGAffineTransformIdentity;
                                                             subView.frame = [[UIScreen mainScreen] bounds];
                     }
                     completion:^(BOOL finished) {}
     ];


Your method looks like this.

- (void)popUpView:(UIView*)subView fromPoint:(CGPoint)iconPoint
{
    subView.center = iconPoint;
    [self.view addSubview:subView];
   
    subView.transform = CGAffineTransformMakeScale(0.05, 0.05);
    [UIView animateWithDuration: 0.4
                          delay: 0
                        options: (UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction)
                     animations:^{
                         subView.transform = CGAffineTransformIdentity;
                                                             subView.frame = [[UIScreen mainScreen] bounds];
                     }
                     completion:^(BOOL finished) {}
     ];
}

Now  implement some code in btnAction . 
Create an instance of second view controller and initialize a navigation controller with it. We are using navigation controller here so we can move second view to other if needed.

 SecondViewController* secndVC = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil];
 UINavigationController* navC = [[UINavigationController alloc] initWithRootViewController:secndVC];

Now calculate the center point of button with respect to superview.

   CGPoint pt = [sender center];
   CGRect frame = [sender.superview.superview frame];
    pt.y += frame.origin.y;

Pass these pt to the Second View property closeCenter that is used to popView at the button center when user back from that second to first view.

  secndVC.closeCenter = pt;

Now pass these navigation controller view and point to popUpView method that we write above.
And add navigation controller as childViewController for first view controller.

 [self popUpView:navC.view fromPoint:pt];
 [self addChildViewController:navC];

Finally your btnAction is as below:

- (IBAction) btnAction:(UIButton*)sender
{
         SecondViewController* secndVC = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil];
         UINavigationController* navC = [[UINavigationController alloc] initWithRootViewController:secndVC];
         CGPoint pt = [sender center];
         CGRect frame = [sender.superview.superview frame];
         pt.y += frame.origin.y;
    secndVC.closeCenter = pt;
    [self popUpView:navC.view fromPoint:pt];
         [self addChildViewController:navC];
}



 ================ Second View controller ==========


In the SecondViewController add a property CGPoint closeCenter

@property (nonatomic) CGPoint closeCenter;


 Your interface file looks like:

@interface SecondViewController : UIViewController
{

}

@property (nonatomic) CGPoint closeCenter;

@end

Now in SecondViewController Implementation add a barbutton item return.
Add a selector on barButton item.

 UIBarButtonItem* barbt = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonSystemItemCancel target:self action:@selector(returnButton)];

 self.navigationItem.leftBarButtonItem = barbt;


Now add the code for navigate the first view with previous animation in selector method.

First make a CGpoint from property closeCenter.

 CGPoint newCenter = self.closeCenter;

Add animation with scaling and make the center of view as the closeCenter.

   self.view.center = newCenter;
   self.view.transform = CGAffineTransformMakeScale(0.05, 0.05);

After completion of animation remove the view from navigation and navigation controller from parentView.

    [self.navigationController.view removeFromSuperview];
    [self.navigationController removeFromParentViewController];
  

your implementation file looks like this

@implementation SecondViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIBarButtonItem* barbt = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonSystemItemCancel target:self action:@selector(returnButton)];

 self.navigationItem.leftBarButtonItem = barbt;
   
}

- (void) returnButton
{
    CGPoint newCenter = self.closeCenter;
   
    [UIView animateWithDuration: 0.4
                          delay: 0
                        options: (UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction)
                     animations:^{
                         self.view.center = newCenter;
                         self.view.transform = CGAffineTransformMakeScale(0.05, 0.05);
                     }
                     completion:^(BOOL finished) {
                         [self.navigationController.view removeFromSuperview];
                                                             [self.navigationController removeFromParentViewController];
                     }
     ];
}

@end




 Now run the project you implement a new animation.

1 comment: