Search code examples
iosxamarinuiviewxamarin.ioscore-animation

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


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. Source
2. enter image description here
3. enter image description here
4. enter image description here

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

enter image description here

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

  • 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;
            }
    );
    

    enter image description here