Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPhone card like flipping animation

I'm trying to create a card flipping animation on iOS, and I'm failing miserably.
Basically I have a global View with a Controller. Inside I have a holderView, which contains the card.
I have the front of the card, which is the mainView, and then the back of the card, which is a flipSideView.

I have tried doing something like this:

[UIView animateWithDuration:1.0
                              delay:0
                            options:UIModalTransitionStyleFlipHorizontal
                         animations:^{
        NSLog(@"started");

        [mainView removeFromSuperview];
        [holderView addSubview:flipsideView];


    } completion:^(BOOL finished){

        NSLog(@"completed");
    }];

That doesn't work, does weird things, I have tried a lot of different things but cannot get it to work perfectly. Would anyone have an idea how I can do that ?

Thank you

like image 693
Andrei Avatar asked Apr 02 '12 22:04

Andrei


People also ask

What are the best card Flip Animation examples?

Hello friends In this collection, I have listed Best Card Flip Animation examples Check out these Awesome flip effect like: #1 Pure CSS Flip Effect , #2 Realistic 3D Image Flip , #3 Direction Flip Effect and many more. Pure CSS Flip Animation, which was developed by Aron. Moreover, you can customize it according to your wish and need.

How do I create an animation like a flip book?

The idea is to create an animation just like a sequence of images in rapid succession. You know, like a flip book! No complex WebGL scenes or advanced JavaScript libraries are needed. By synchronizing each frame to the user’s scroll position, we can play the animation as the user scrolls down (or back up) the page.

How do I animate the message bubble on my iPhone?

Use bubble effects to animate the message bubble. In a new or existing conversation, type a message or insert a photo or Memoji. Touch and hold , then tap the gray dots to preview different bubble effects.

How do I send animated messages on Android?

In the Messages app , you can animate a single message with a bubble effect or fill the entire message screen with a full-screen effect (for example, balloons or confetti). You can even send a personal message with invisible ink that remains blurred until the recipient swipes to reveal it.


1 Answers

Try this:

[UIView transitionFromView:mainView
  toView:holderView
  duration:1.0f
  options:UIViewAnimationOptionTransitionFlipFromRight
  completion:^(BOOL finished) {}];

That should work. Hope that Helps!

like image 148
msgambel Avatar answered Sep 22 '22 11:09

msgambel