UIView appereance from bottom to top and vice versa(Core Animation)

Question

My goal is to understand and implement feature via Core Animation.
I think it's not so hard,but unfortunately i don't know swift/Obj C and it's hard to understand native examples.

---

Visual implementation

So what exactly i want to do(few steps as shown on images):
1.
2.
3.
4.

And the same steps to hide view(vice versa,from top to bottom) until this :

Also,i want to make this UIView more generic,i mean to put this UIView on my StoryBoard and put so constraints on AutoLayout(to support different device screens).

Any ideas? Thanks!

Solution 1

Assuming the original view is something like:

var view = new UIView(new CGRect(View.Frame.Left, View.Frame.Height - 200, View.Frame.Right, 0));
view.BackgroundColor = UIColor.Clear;

Show:

UIView.Animate(2.0, 0.0,
    UIViewAnimationOptions.CurveLinear,
    () =>
        {
            view.BackgroundColor = UIColor.Blue;
            var height = 100;
            view.Frame = new CGRect(View.Frame.Left, view.Frame.Y - height , view.Superview.Frame.Right, height);
        },
    () =>
        {
            // anim done
        }                                  
);

Hide:

UIView.Animate(2.0, 0.0,
    UIViewAnimationOptions.CurveLinear,
    () =>
        {
            view.BackgroundColor = UIColor.Clear;
            var height = 100;
            view.Frame = new CGRect(View.Frame.Left, view.Frame.Y + height, view.Superview.Frame.Right, 0);

        },
    () =>
        {
            view.Hidden = true;
        }
);

Solution 2

You can use like this Extension

extension UIView{
    func animShow(){
        UIView.animate(withDuration: 2, delay: 0, options: [.curveEaseIn],
                       animations: {
                        self.center.y -= self.bounds.height
                        self.layoutIfNeeded()
        }, completion: nil)
        self.isHidden = false
    }
    func animHide(){
        UIView.animate(withDuration: 2, delay: 0, options: [.curveLinear],
                       animations: {
                        self.center.y += self.bounds.height
                        self.layoutIfNeeded()

        },  completion: {(_ completed: Bool) -> Void in
        self.isHidden = true
            })
    }
}

Solution 3

See my view case was opposite i am directly doing changes in that , test if it is working for you,

Show Logic

//Add your view on storyBoard / programmatically bellow tab bar

[self.view bringSubviewToFront:self.miniMenuView];

CGRect rectformedicationTableViewcell;// = CGRectZero;

rectformedicationTableViewcell = CGRectMake(0.0f, self.view.frame.size.hight, self.view.frame.size.width, 150.0f);

self.miniMenuView.frame = rectformedicationTableViewcell;

if([self.miniMenuView superview]) {
    self.miniMenuView.hidden = YES;
}
self.miniMenuView.hidden = NO;

[UIView animateWithDuration:0.3f
                      delay:0.0f
                    options:UIViewAnimationOptionBeginFromCurrentState
                 animations:^{
                       [self.miniMenuView setFrame:CGRectMake(0.0f, self.view.frame.size.hight - 150.0f, self.view.frame.size.width, 150.0f)];

                 }
                 completion:nil];

Hide Logic

[self.view sendSubviewToBack:self.miniMenuView];

[UIView animateWithDuration:0.3f
                      delay:0.0f
                    options:UIViewAnimationOptionBeginFromCurrentState
                 animations:^{

                                                 [self.miniMenuView setFrame:CGRectMake(0.0f, self.view.frame.size.hight, self.view.frame.size.width, 150.0f)];


                 }
                 completion:^(BOOL completed){
                     if([self.miniMenuView superview]) {
                         self.miniMenuView.hidden = YES;
                     }

                 }];

Consider this as basic idea do changes as per your requirements Best luck.