Search This Blog

Saturday, 27 June 2015

Card Animation Using Facebook POP Framework

Hey!

Hope you all are doing great, and working on some great ideas!

So , i hope everybody heard that a company like FB launched a Framework POP. What it does? It actually allows you to create some nice animations in your app, whereas you may need to do some stuff yourself, so here it is , a card animation using this framework:

It's an animation which will give you an effect like card is thrown on screen(like on table)

ASSUMPTIONS :

1) A UIView which is out of bounds of your screen, and whose angle is changed initially using pop framework code only.In this example that UIView is 'flippercard'.

2) You need to download and setup 'POP Framework'  in your project. It is mentioned at this link: https://github.com/facebook/pop


LETS START:

We will animate this view to come into the bounds of viewcontroller parent view with combination of pop animations to give an effect of card.

a) First import pop framework into your viewcontroller by simply adding '#import "POP.h"'

b) In your '-(void)viewdidload' function copy this code below, this code is responsible to change the initial angle of UIView (flipperCard)


    POPSpringAnimation *rotationAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];
    rotationAnimation.beginTime = CACurrentMediaTime();
    rotationAnimation.toValue = @(2);
    rotationAnimation.springBounciness = 1;
    rotationAnimation.springSpeed = 4;

    [flipperCard.layer pop_addAnimation:rotationAnimation forKey:@"rotationInitial"];



c) Now , simply copy paste this below function in your view controller.


-(void)animationflipthroughpop{
    
    
    POPBasicAnimation *easin = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
    easin.toValue = @(300);
    easin.duration = 0.2;

    POPSpringAnimation *rotationAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];
    rotationAnimation.beginTime = CACurrentMediaTime();
    rotationAnimation.toValue = @(0);
    rotationAnimation.springBounciness = 0.f;
    rotationAnimation.springSpeed = 0.2;
    [flipperCard.layer pop_addAnimation:rotationAnimation forKey:@"rotationAnim"];
    [flipperCard.layer pop_addAnimation:easin forKey:@"easein"];
   
}


d) Now, simply call this above function in your -(void)viewdidappear:(BOOL)animated function, with a 0.2 seconds delay:

[self performSelector:@selector(animationflipthroughpop) withObject:nil afterDelay:0.2];

     


Run your app, and have fun :)


CHAO!

No comments:

Post a Comment