flip greeting card like just wink app

问题:

Can anyone help me in making animation like we have in Just Wink App.I want to have the same preview animation as in Just Wink. here is the animation which i want to have

I have tried a lot for hours but didn't find anything useful.I tried the similar animation using CATransform3D but not able to get the exact one with this also .Here is the code that i have tried

intialTransform = CATransform3DIdentity;
intialTransform.m34 = 1.0 / -500;
intialTransform = CATransform3DRotate(intialTransform, DEGREES_TO_RADIANS(70), 1.0f, 0.0f, 0.0f);
_myView1.layer.transform = intialTransform;

i take three view as above like _myView2 and_myview3 and have CATransform3DIdentity for everyone.I am able to rotate the different view like in Just Wink but not able to gain the exact animation. Tried a lot for samples but that also didm;t solve my problem. Please help!!!!

回答1:

Use this code sample for review "open card" animation in implementation which work for me. Just insert the code in the new "single view" project and run.

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@property (strong, nonatomic) UIView *insideView;
@property (strong, nonatomic) UIView *pageView;
@property (strong, nonatomic) UIView *backPageView;
@property (assign, nonatomic) CGRect cardFrame;

@end

@implementation ViewController

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
  UITouch *touch = [touches anyObject];
  if ([touch locationInView:[self view]].x <= CGRectGetMaxX(_cardFrame)) {

    float dx = ([touch locationInView:[self view]].x - CGRectGetMaxX(_cardFrame)) / _cardFrame.size.width;

    //create perspective
    CATransform3D mt = CATransform3DIdentity;
    mt.m34 = 1.0/-500.;

    //create rotation
    CATransform3D open = CATransform3DMakeRotation( -dx * M_PI_2, 0, - 1, 0);

    //create result transform
    CATransform3D openTransform = CATransform3DConcat(open, mt);

    //apply transforms
    [[_pageView layer] setTransform:openTransform];
    [[_backPageView layer] setTransform:openTransform];
  }
}

- (void)viewDidLoad
{
  [super viewDidLoad];
  [[self view] setBackgroundColor:[UIColor grayColor]];

  //create frame for 2 test views
  CGFloat size = 200.0;
  _cardFrame = CGRectMake([[self view] center].x - size / 2, [[self view] center].y - size / 2 , size, size);

  //lower view
  _insideView = [[UIView alloc] initWithFrame: _cardFrame];
  [_insideView setBackgroundColor:[UIColor redColor]];

  //upper view
  _pageView = [[UIView alloc] initWithFrame:_cardFrame];
  [_pageView setBackgroundColor:[UIColor greenColor]];

  //upper view back side
  _backPageView = [[UIView alloc] initWithFrame:_cardFrame];
  [_backPageView setBackgroundColor:[UIColor blueColor]];

  [[self view] addSubview:_insideView];
  [[self view] addSubview:_pageView];
  [[self view] insertSubview:_backPageView belowSubview:_pageView];

  //get layer of upper view and set needed property
  CALayer *viewLayer = [_pageView layer];
  CALayer *viewBackLayer = [_backPageView layer];

  [viewLayer setAnchorPoint:(CGPoint){0.0 , 0.5}];
  [viewLayer setFrame:_cardFrame];
  [viewLayer setDoubleSided:NO];
  [viewBackLayer setAnchorPoint:(CGPoint){0.0 , 0.5}];
  [viewBackLayer setFrame:_cardFrame];

  //create perspective
  CATransform3D mt = CATransform3DIdentity;
  mt.m34 = 1.0/-500.;

  //create rotation
  CATransform3D open = CATransform3DMakeRotation(3 * M_PI_4, 0, - 1, 0);

  //create result transform
  CATransform3D openTransform = CATransform3DConcat(open, mt);

  [UIView animateWithDuration:1.0 animations:^
   {
     //close animation
     [viewLayer setTransform:openTransform];
     [viewBackLayer setTransform:openTransform];
   } completion:^(BOOL finished)
   {
     [UIView animateWithDuration:1.0 animations:^
      {
        //close animation
        [viewLayer setTransform:CATransform3DIdentity];
        [viewBackLayer setTransform:CATransform3DIdentity];
      }];
   }];
}

@end