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

这是代码

- (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 2

试试这个。

//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 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 Frame，然后在单击的事件按钮上设置Load。查看动画从下到上

CGRect optionsFrame = AddNOTEview.frame;

optionsFrame.origin.y=300;

[UIView beginAnimations:nil context:nil];

[UIView setAnimationDuration:0.50];

AddNOTEview.frame = optionsFrame;

 [self.view addSubview:AddNOTEview];

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

4 个答案:

旋转变换

锚点