CODEWITHSUNDEEP
iosanimation
Dasem
Dasem

Reputation: 440

Card flipping animation

I am making a card game and would like to use a Card flipping animation.

Currently I'm using this code with two images, front and back: card, is a uiview with two UIImageView propertys

[UIView transitionWithView:card duration:0.65f
                   options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
                       card.backImageView.image = card.frontImageView.image;
                       card.layer.shadowOpacity = 0.8;
                   } completion:^(BOOL finished){
                       card.layer.shadowOpacity = 0.0;
                   }];

Upvotes: 0

Views: 5604

Answers (3)

Incinerator
Incinerator

Reputation: 2807

This is how to perform a card flipping animation in swift 3:

UIView.transition(from: frontImageView, 
                    to: backImageView, 
              duration: 0.65, 
               options: .transitionFlipFromRight, 
            completion: nil)

Upvotes: 1

Dasem
Dasem

Reputation: 440

i tested a few things, and Compromise with this:

_tempTransform = card.transform;
[card loadFront];//loads the front image.
card.frontImageView.hidden=YES;



[UIView animateWithDuration:0.02f
                  delay:0.0
                options:UIViewAnimationOptionCurveEaseOut
             animations:^{
                 CATransform3D transform = CATransform3DIdentity;
                 transform.m34 = 1.0 / -500;
                 transform = CATransform3DRotate(transform, 15.0f * M_PI / 180.0f, 0, -1, 0.0f);
                 card.layer.transform = transform;

             }completion:^(BOOL done){
                 card.layer.shadowOpacity=0.1f;
                 card.transform=CGAffineTransformScale(card.transform, 1.2f, 1.2f);

                 [UIView transitionWithView:card duration:0.4f
                                    options:UIViewAnimationOptionTransitionFlipFromRight animations:^{

                                        card.frontImageView.hidden=NO;
                                        card.backImageView.hidden=YES;


                                    } completion:^(BOOL finished){
                                        card.layer.shadowOpacity=0.0f;
                                        card.transform=_tempTransform;



                                    }];
             }];

Upvotes: 0

Lyndsey Scott
Lyndsey Scott

Reputation: 37290

In order to create a basic card flipping animation like the one in the video you've linked to, I suggest putting frontImageView and the backImageView directly on top of each other on the UIView you intend to flip. To start, set their images to front and back accordingly; and, in this particular case, hide the frontImageView and show the backImageView.

Assuming "card" is the UIView you intend to flip, to perform the flip try:

[UIView transitionWithView:card duration:0.65f
               options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
                   frontImageView.hidden = NO;
                   backImageView.hidden = YES;
               } completion:^(BOOL finished) {
                   // whatever you'd like to do immediately after the flip completes
               }];

Edit:

And to handle the shadow, first off, it appears in the video you posted that the shadow grows in length moreso than it just fades in. And it seems as if (and makes logical sense that) the shadow reaches its peak during the middle of the animation as the card is lifted at its highest point. Since the shadow grows then shrinks during the course of the flip animation, it doesn't make sense to include the shadow animation within the same animation block as the flip since they're on different time schedules.

Secondly with regard to the shadow, to animate the layer property, you have to use Core Animations.

Perhaps you can run the two animations concurrently, i.e. while the above animation is performing, also do something like:

CABasicAnimation *shadowAnimation = [CABasicAnimation animationWithKeyPath:@"shadowRadius"];
shadowAnimation.delegate = self;
[shadowAnimation setFromValue:[NSNumber numberWithFloat:3.0]];
[shadowAnimation setToValue:[NSNumber numberWithFloat:10.0]];
[shadowAnimation setDuration:0.65f];
shadowAnimation.autoreverses = YES;
[[card layer] addAnimation:shadowAnimation forKey:@"shadowRadius"];

The last portion has been adapted from this code and takes advantage of the autoreverse property to automatically reverse the shadow's growth.

Upvotes: 4

Related Questions