动画像卡片应用程序 iphone

Question

我正在尝试实现与卡片应用程序 (http://www.youtube.com/watch?v=aWjX_qufmc0) 中相同的效果，用于打开里面的内容（水平贺卡打开类型动画：https://store.marathonpress.com/image/cache/data/store_381/Previews/Press-Printed-Card-Folded-5x7-H-C-500x500.jpg）。我用CABasicAnimation试过了，但无法访问，谁能帮我实现同样的动画效果。

我正在尝试这样：

- (void)loadInsideMessageView {

    [UIView transitionWithView:backgroundView
                      duration:1.0
                       options:UIViewAnimationOptionTransitionFlipFromBottom //any animation
                    animations:^ {
                        insideView.frame = CGRectMake(0, 40, 568, 280);
                        [backgroundView addSubview:insideView];
                    }
                    completion:nil];
}

谢谢。

Answer 1

要创建必要的动画，您可以使用Core Animation Function。

创建新的Single View Application项目并将下面的代码插入ViewController.m，看看它是如何工作的。

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

  //create frame for 2 test views
  CGRect frame = CGRectMake(50.0, 100.0 , 200.0 ,100.0);

  //lower view
  UIView *insideViev = [[UIView alloc] initWithFrame: frame];
  [insideViev setBackgroundColor:[UIColor redColor]];

  //upper view
  UIView *pageView = [[UIView alloc] initWithFrame:frame];
  [pageView setBackgroundColor:[UIColor greenColor]];

  [[self view] addSubview:insideViev];
  [[self view] addSubview:pageView];

  //get layer of upper view and set needed property
  CALayer *viewLayer = [pageView layer];
  [viewLayer setAnchorPoint:(CGPoint){0.5 , 0.0}];
  [viewLayer setFrame:frame];

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

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

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

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