像眨眼应用一样翻转贺卡

Question

谁能帮助我制作像我们在 Just Wink 应用程序中一样的动画。我想要与在 Just Wink 中相同的预览动画。 here is the animation which i want to have

我已经尝试了好几个小时，但没有发现任何有用的东西。我使用 CATransform3D 尝试了类似的动画，但也无法获得确切的动画。这是我尝试过的代码

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

我像 _myView2 和 _myview3 一样采用上面的三个视图，并且每个人都有 CATransform3DIdentity。我能够像在 Just Wink 中一样旋转不同的视图，但无法获得确切的动画。 尝试了很多样品，但这也没有解决我的问题。 请帮忙！！！！

Answer 1

使用此代码示例查看适用于我的实现中的“打开卡片”动画。 只需将代码插入新的“单一视图”项目并运行即可。

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