UIAnimation - Show UIView from button.frame.origin.y

Question

I have a UIButton somewhere on my view. On touch event of button I making a UIView appear. The UIAnimation I have used make the view appear from top of window. But I want it to appear from button.frame.origin.y . Before touching the button the view is not visible. On touching the button view should start appearing from above position.

Here is the code :

-(IBAction) ShowInfowView:(id)sender{

    CGRect rect = viewInfo.frame;

    rect.origin.y = rect.size.height - rect.size.height+58.0;
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.70];
    [UIView setAnimationDelay:0.0];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

    viewInfo.frame = rect;

    [UIView commitAnimations];

}

This is how I am hiding the view again :

-(IBAction) HideInfoView:(id)sender{

    CGRect rect = viewInfo.frame;

    rect.origin.y = -rect.size.height;
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.70];
    [UIView setAnimationDelay:0.0];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

    viewInfo.frame = rect;

    [UIView commitAnimations];

}

In viewDidLoad I am doing the following :

CGRect rect = viewInfo.frame;
rect.origin.y = -rect.size.height;
viewInfo.frame = rect;  

UPDATE:

Please see this example. Here view is appearing from top of screen. I want it to appear from button y axis. For that matter please consider button y position a bit upwards.

Answer 1

So you want a slide-in effect, but not from the top of the screen, just some arbitrary value?

One way to do it:

1) You should create a view that has the dimensions and position of your desired view AFTER animation finishes, we'll call it baseview.

2) Set this baseview property clipsToBounds to YES. This will make all subviews that are outside of the baseview's frame invisible.

3) Add your animating view as a subview of the baseview, but set the frame so it is invisible (by plcacing it above the baseview):

frame = CGRectMake(0, -AnimViewHeight, AnimViewWidth, AnimViewHeight);

4) Animate the animview frame:

//put this inside of an animation block
AnimView.frame = CGRectMake(0, 0, AnimViewWidth, AnimViewHeight);

EDIT:

Example:

//define the tags so we can easily access the views later
#define BASEVIEW_TAG 100
#define INFOVIEW_TAG 101

- (void) showInfo
{
        //replace the following lines with preparing your real info view
        UIView * infoView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
        [infoView setBackgroundColor: [UIColor yellowColor]];
        [infoView setTag: INFOVIEW_TAG];

        //this is the frame of the info view AFTER the animation finishes (again, replace with real values)
        CGRect targetframe = CGRectMake(100, 100, 100, 100);

        //create an invisible baseview
        UIView * baseview = [[UIView alloc] initWithFrame:targetframe];
        [baseview setBackgroundColor: [UIColor clearColor]];
        [baseview setClipsToBounds: YES]; //so it cuts everything outside of its bounds
        [baseview setTag: BASEVIEW_TAG];

        //add the nfoview to the baseview, and set it above the bounds frame
        [baseview addSubview: infoView];
        [infoView setFrame:CGRectMake(0, -infoView.bounds.size.height,
                                      infoView.bounds.size.width, infoView.bounds.size.height)];

        //add the baseview to the main view
        [self.view addSubview: baseview];

        //slide the view in
        [UIView animateWithDuration: 1.0 animations:^{
            [infoView setFrame: baseview.bounds];
        }];

        //if not using ARC, release the views
        [infoview release];
        [baseview release];
}

- (void) hideinfo
{
        //get the views
        UIView * baseView = [self.view viewWithTag: BASEVIEW_TAG];
        UIView * infoView = [baseView viewWithTag: INFOVIEW_TAG];

        //target frame for infoview - slide up
        CGRect out_frame = CGRectMake(0, -infoView.bounds.size.height,
                                      infoView.bounds.size.width, infoView.bounds.size.height);

        //animate slide out
        [UIView animateWithDuration:1.0
                         animations:^{
                             [infoView setFrame: out_frame];
                         } completion:^(BOOL finished) {
                             [baseView removeFromSuperview];
                         }];
    }

Answer 2

I have done exactly what you're trying in my recent project. The following steps should make this work: 1. In your viewDidLoad: you init your viewToFadeIn like this:

viewToFadeIn = [[UIView alloc] initWithFrame:CGRectMake(20,self.view.frame.size.height+10, self.view.frame.size.widh-40, 200)]; 

//its important to initalize it outside your view
//your customization of this view
[self.view addSubview:viewToFadeIn];

2.your ShowInfowView: Method should look like this:

` -(IBAction) ShowInfowView:(id)sender{

[UIView beginAnimations:@"fadeIn" context:NULL];
[UIView setAnimationDuration:0.25]; 
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(animationFinished:finished:context:)];
viewToFadeIn.transform = CGAffineTransformMakeTranslation(0, -290);
//290 is in my case, try a little for your correct value
[UIView commitAnimations];

} 3.yourHideInfoView:` Method looks like this

-(IBAction) HideInfoView:(id)sender{
[UIView beginAnimations:@"fadeOut" context:NULL];
[UIView setAnimationDuration:0.25]; 
[UIView setAnimationDelegate:self];
viewToFadeIn.transform = CGAffineTransformMakeTranslation(0, 0);
[UIView commitAnimations];
}

EDIT: 4. animationFinishedMethod:

- (void)animationFinished:(NSString *)animationID finished:(BOOL)finished context:(void *)context{ 
   if ([animationID isEqual:@"fadeIn"]) { 
      //Do stuff 
   } 
   if ([animationID isEqual:@"fadeOut"]) { 
      //Do stuff 
   } 
}

SEE THIS

This should do the trick. Good luck

Answer 3

Your problem is not clear (for me). What is this?

rect.origin.y = rect.size.height - rect.size.height+58.0;

Is 58 origin of your UIButton?

You should use sender.frame etc

Use blocks to animate like this

[UIView animateWithDuration:0.5f animations:^{
    // Animation here
} completion:^(BOOL finished) {
    // onComplete
}];

Answer 4

- (void) slideIn{
    //This assumes the view and the button are in the same superview, if they're not, you'll need to convert the rects
    //I'm calling the animated view: view, and the button: button...easy enough
    view.clipToBounds = YES;
    CGRect buttonRect = button.frame;
    CGRect viewRect = CGRectMake(buttonRect.origin.x, buttonRect.origin.y + buttonRect.size.height, view.bounds.size.width, 0);
    CGFloat intendedViewHeight = view.height;
    view.frame = viewRect;
    viewRect.size.height = intendedViewHeight;
   [UIView animateWithDuration:.75 delay:0.0f options:UIViewAnimationOptionCurveEaseOut animations:^{
        view.frame = viewRect;
    }completion:nil];
}

This will cause the the view to appear to slide out from under the button. To slide the view back in, you just reverse the animations. If you wish to slide it up from the button, you'll need to make sure your starting 'y' is the 'y' value of the button (rather than the 'y' + 'height') and animate both the height and y values of the view that needs animating.