CODEWITHSUNDEEP
iosobjective-ccore-animationuikit-dynamics
Hxb
Hxb

Reputation: 79

make animations effects just like skype iOS application's menu

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,

enter image description here

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

enter image description here

(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,

enter image description here

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

Upvotes: 0

Views: 1122

Answers (1)

Ben
Ben

Reputation: 17

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.

Upvotes: 1

Related Questions