Fix animation of pop-up scroll menu

Question

I'm trying to make a menu that slides up from the button via the activation of a UIbutton. When you press the button, a UIscrollView slides up from the bottom. The button also stays above the slide menu when the UIbutton is and isn't activated.

Here's what it should look like:

I have the screen locked to portrait mode in my actual project, the issue is that when you press the button. The UIscrollView slides to the middle of the screen and when you press the button again, it only moves down a few. And the button doesn't move WITH the UIscrollView. I want to make it so the UI scrollView and Unbutton comes up like in the picture above and goes down UNDER the screen viewport.

This is what my actual project looks like - http://s4.postimg.org/dlvxnffbx/unnamed.png

Here are the code from the viewcontroller.m for the animations.

#import "ViewController.h"

@interface ViewController ()


@end

@implementation ViewController
@synthesize scrollView;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    draw1 = 0;
    scrollView.frame = CGRectMake(0, 300, 480, 55);
    [scrollView setContentSize:CGSizeMake(480, 55)];

    openMenu.frame = CGRectMake(220, 270, 60, 30);
}
- (IBAction)OpenMenu:(id)sender {
    if (draw1 ==0) {
        draw1 = 1;
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:0.5];
        [UIView setAnimationDelay:0.0];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

        [UIButton beginAnimations:nil context:nil];
        [UIButton setAnimationDuration:0.5];
        [UIButton setAnimationDelay:0.0];
        [UIButton setAnimationCurve:UIViewAnimationCurveEaseOut];

        scrollView.frame = CGRectMake(0, 245, 568, 55);
        openMenu.frame = CGRectMake(220, 200, 60, 30);

        [self.view bringSubviewToFront:scrollView];

        [UIView commitAnimations];
    } else {
        draw1 = 0;
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:0.5];
        [UIView setAnimationDelay:0.0];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

        [UIButton beginAnimations:nil context:nil];
        [UIButton setAnimationDuration:0.5];
        [UIButton setAnimationDelay:0.0];
        [UIButton setAnimationCurve:UIViewAnimationCurveEaseOut];

        scrollView.frame = CGRectMake(0, 300, 568, 55);
        openMenu.frame = CGRectMake(220, 270, 60, 30);

        [self.view bringSubviewToFront:scrollView];

        [UIView commitAnimations];
    }
}
@end

tuledev · Accepted Answer · 2015-08-14T15:33:28.157

2

Have you tried to replace:

if (draw1 ==0) {
    draw1 = 1;
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationDelay:0.0];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

    [UIButton beginAnimations:nil context:nil];
    [UIButton setAnimationDuration:0.5];
    [UIButton setAnimationDelay:0.0];
    [UIButton setAnimationCurve:UIViewAnimationCurveEaseOut];

    scrollView.frame = CGRectMake(0, 245, 568, 55);
    openMenu.frame = CGRectMake(220, 200, 60, 30);

    [self.view bringSubviewToFront:scrollView];

    [UIView commitAnimations];
} else {
    draw1 = 0;
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationDelay:0.0];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

    [UIButton beginAnimations:nil context:nil];
    [UIButton setAnimationDuration:0.5];
    [UIButton setAnimationDelay:0.0];
    [UIButton setAnimationCurve:UIViewAnimationCurveEaseOut];

    scrollView.frame = CGRectMake(0, 300, 568, 55);
    openMenu.frame = CGRectMake(220, 200, 60, 30);

    [self.view bringSubviewToFront:scrollView];

    [UIView commitAnimations];
}

with :

    if (draw1 ==0) {
        draw1 = 1;
        [UIView animateWithDuration:0.5
                              delay:0.0
                            options: UIViewAnimationOptionCurveEaseOut
                         animations:^{
                             scrollView.frame = CGRectMake(0, 1000, 568, 55);
                             openMenu.frame = CGRectMake(220, 200, 60, 30);
                         } 
                         completion:^(BOOL finished){
                             NSLog(@"Done!");
                         }];
    } else {
        draw1 = 0;
        [UIView animateWithDuration:0.5
                              delay:0.0
                            options: UIViewAnimationOptionCurveEaseOut
                         animations:^{
                             scrollView.frame = CGRectMake(0, 300, 568, 55);
                             openMenu.frame = CGRectMake(220, 270, 60, 30);
                         } 
                         completion:^(BOOL finished){
                             NSLog(@"Done!");
                         }];
    }

edited Aug 14 '15 at 15:33

answered Aug 14 '15 at 13:24

tuledev

10,177
4
29
49

I get the error: "Implicit conversation from enumeration type enum UIViewAnimationCurve' to different enumeration type 'UIViewAnimationOptions' (aka ' enum UIViewAnimationOptions'0 on this line of code: options: UIViewAnimationCurveEaseOut – PHP Web Dev 101 Aug 14 '15 at 14:00
sorry, try with UIViewAnimationOptionCurveEaseOut. Edited my answer – tuledev Aug 14 '15 at 14:02
i just tried it, the UIscrollView comes to the center of the screen (and looks like this - http://s4.postimg.org/dlvxnffbx/unnamed.png) but never closes. – PHP Web Dev 101 Aug 14 '15 at 14:05
Edited my answer. try it and what happen? – tuledev Aug 14 '15 at 14:09
Wait, I'm confused about the scrollview.frame stuff, can you edit it into my code? – PHP Web Dev 101 Aug 14 '15 at 14:13
I edited your codes. And I suggested you have to check the frames. Pls check them carefully. – tuledev Aug 14 '15 at 14:39
See 2 last line in my answer. Maybe your frames are incorrect. – tuledev Aug 14 '15 at 15:02
where do I put this: scrollView.frame = CGRectMake(0, 0, 568, 55); openMenu.frame = CGRectMake(220, 10, 60, 30); – PHP Web Dev 101 Aug 14 '15 at 15:10
replace scrollView.frame = CGRectMake(0, 245, 568, 55); openMenu.frame = CGRectMake(220, 200, 60, 30);. as i mention – tuledev Aug 14 '15 at 15:11
The only thing that happens is that the UIscrollView goes all the way to the top of the screen and when i press the button again, nothing happens. – PHP Web Dev 101 Aug 14 '15 at 15:14
Good, it means animation works fine. I edited my answer again – tuledev Aug 14 '15 at 15:17
Let try it. Edited. And what happen? – tuledev Aug 14 '15 at 15:21
It's working almost perfectly. The UIscrollView goes up then when i press the button again, it goes back under the viewport. Now how do i make the scrollview taller in height, let's say 200 or something. – PHP Web Dev 101 Aug 14 '15 at 15:24
Set it what you want. Just change frames (e.g. CGRectMake(0, 300, 568, 55)) values, and see what happen. And choose what you want. – tuledev Aug 14 '15 at 15:27
Please mark my answer is correct. So someone can read it when needed. – tuledev Aug 14 '15 at 15:28
Can you give me an example and thank you for your help :) – PHP Web Dev 101 Aug 14 '15 at 15:28
E.g. this line is for scroll scrollView.frame = CGRectMake(0, 300, 568, 55); change 300->200. or100 ==> scrollView.frame = CGRectMake(0, 200, 568, 55); or scrollView.frame = CGRectMake(0, 100, 568, 55); or any value. And the same for others .frame=CGRectMake – tuledev Aug 14 '15 at 15:30
You should read more about frame of UIView. Like:http://stackoverflow.com/questions/5361369/uiview-frame-bounds-and-center – tuledev Aug 14 '15 at 15:32
CGRectMake(x, y, width, height) - is that correct syntax for CGRectMake? – PHP Web Dev 101 Aug 14 '15 at 15:39

Adnan Aftab · Answer 2 · 2015-08-14T14:38:07.713

If you are looking it should slide from button, means at start its frame size should be zero and start emerging from button center and should get full size then you should set frame before animation like this

Below code will bring scrollView from bottom of screen when you want to open and on close it will hide scrollView bottom of the screen...

In viewDidLoad method set initial frame what ever you want... if you want it to hide then set y position of scrollView greater then height of superView, in that case It will hide view at bottom.

(draw) {
    // to open
    draw = 0;
    [UIView animateWithDuration:1 animations:^{
        scrollView.frame = CGRectMake(0, self.view.bounds.size.height - 55, self.view.bounds.size.width, 55);
        openMenu.frame = CGRectMake(220, scrollView.frame.origin.y - 40, 60, 30);

    }];
}
else
{
    //close
    draw = 1;
    [UIView animateWithDuration:1 animations:^{
        CGRectMake(0, self.view.bounds.size.height + 55, self.view.bounds.size.width, 55);
        openMenu.frame = CGRectMake(220, scrollView.frame.origin.y - 40, 60, 30);

    }];
}

Can you give me ur start and end view (what you want), I will write code for that — Adnan Aftab, Aug 14 '15 at 13:57
I think it's in the code that I included in my question, not sure what you are asking. (i'm new to objective-c) — PHP Web Dev 101, Aug 14 '15 at 14:01

Fix animation of pop-up scroll menu

2 Answers2