制作动画效果，就像Skype iOS应用程序的菜单一样

Question

I was trying to create animation like skype bottom menu in iPhone. I tried many ways to solve it but wasn't able to configure the accurate solution. I have tried,

(1)CGPathAddLineToPoint
(2)CGPathAddArc
(3)CGPathAddArcToPoint
(4)[UIView animateWithDuration:5000 delay:500 usingSpringWithDamping:0.5 initialSpringVelocity:0.5 options:option animations:^{
        square.layer.cornerRadius = 25;
        square.layer.masksToBounds = YES;
    } completion:^(BOOL flag){
        square.layer.cornerRadius = 0;
        square.layer.masksToBounds = YES;
    }];

and some UIKit Dynamic approaches too. Unfortunately none of them worked for me to get exact solution. Main problem that i was facing was that CornerRadius rounds whole view, where i need something Curved/Arc. Ark approach also didn't provides needed solution.

Animation in Skype works this way.

Working Demo

(1)Firstly user taps on bottom right,

(2)Then menu animates upward with a curved (curved outside) effect,

(3) After collision with top boundary (i guess it is using UIKit Dynamic and on top there is an invisible boundary), Menu shows a bounce back effect and again shows a curved effect but this time curve inside,

Kindly guide if i'm using right approach or what should i do? Thanks

Answer 1

this is a nicely written tutorial on how to create such animation: http://holko.pl/2014/06/26/recreating-skypes-action-sheet-animation/

At the end of the tutorial, the author also includes the github address that hosts a reusable framework that you can directly use to create such effect.

Hope this helps.