如何使用 CATransform3D 在 iOS 中从下到上动画视图

Question

我正在为 UIView 制作动画以感受书的页面效果

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



- (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];
          }];
     }];
}

但我希望 UIView 从下到上进行动画处理，此代码会进行动画处理，但会像书页一样从左到右进行动画处理。 请帮忙！！ 提前致谢。

Answer 1

试试这个。

//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.5 , 0.0}];
[viewLayer setFrame:_cardFrame];
[viewLayer setDoubleSided:NO];
[viewBackLayer setAnchorPoint:(CGPoint){0.5 , 0.0}];
[viewBackLayer setFrame:_cardFrame];

//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: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];
      }];
 }];

Answer 2

这里是代码

- (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];

// need to change the anchor point to center of top edge. 
// that is the point in which you need to rotate.
[viewLayer setAnchorPoint:(CGPoint){0.5 , 0.0}];
[viewLayer setFrame:_cardFrame];
[viewLayer setDoubleSided:NO];
[viewBackLayer setAnchorPoint:(CGPoint){0.5 , 0.0}];
[viewBackLayer setFrame:_cardFrame];

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

//need to rotate in X axis. so changed arguments.
CATransform3D open = CATransform3DMakeRotation(3 * M_PI_4,1,0, 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];
      }];
 }];
}

Answer 3

翻页的两个关键部分是旋转变换和锚点。如果您对此不熟悉，那么我建议您查看文档以了解它们是如何工作的，我只会做一个简短的解释。

旋转变换

你可以看到CATransform3DMakeRotation有4个参数，第一个是旋转的角度，接下来的三个是旋转的轴。您正在围绕 (0,-1, 0) 旋转，它是 y 轴（在屏幕上垂直）。要改为围绕水平轴 (x) 旋转，您应该将最后 3 个参数更改为 1, 0, 0（或者可能是 -1，我似乎不记得在我的头顶上）。

CATransform3D open = CATransform3DMakeRotation(3.0*M_PI_4, // angle 
                                               1, 0, 0);   // axis

锚点

锚点指定图层相对于其位置的绘制方式。锚点中的 x 和 y 都在 0 到 1 之间，因此 (0.5, 0.5) 位于图层的中心，无论大小。在您的情况下，锚点是 (0.0, 0.5) 表示中心左边缘。您可能应该将其更改为 (0.5, 0.0) 中心顶部边缘或 (0.5, 1.0) 中心底部边缘，具体取决于您希望锚点位于页面翻转的位置。

viewLayer.anchorPoint = CGPointMake(0.5, 0.0); // center top edge

Answer 4

在视图中设置 Uiview 框架并加载然后设置您的事件按钮单击。从底部到顶部查看动画

CGRect optionsFrame = AddNOTEview.frame;

optionsFrame.origin.y=300;

[UIView beginAnimations:nil context:nil];

[UIView setAnimationDuration:0.50];

AddNOTEview.frame = optionsFrame;

 [self.view addSubview:AddNOTEview];