如何在三维空间中同时旋转两个UIView平面

Question

由于项目限制，我正试图使用UIView而不是CALayer来创建"翻页效果"。这需要将1个UIView翻转180度，并将其"粘贴"到另一个UIView的背面。然后，通过在三维空间中旋转超视图，可以同时旋转两个UIView。

我正在尝试移植AFKPageFlipper的"initFlip"方法，以使用UIView而不是UIImage。

下面是我尝试移植它的一个片段。最初的翻页是有效的，但代码中的"前一层"似乎没有显示出来。就好像我看不到页面的后端。当我翻页时，动画最初是正确的（后一层很好），但后来在页面的另一侧（前一层），我看到了第一页的倒置视图（backLayer）。

任何帮助都会很棒！

flipAnimationLayer = [[UIView alloc] init];
flipAnimationLayer.layer.anchorPoint = CGPointMake(1.0, 0.5);
flipAnimationLayer.layer.frame = rect;
[self addSubview:flipAnimationLayer];
UIView *backLayer;
UIView *frontLayer;
if (flipDirection == AFKPageFlipperDirectionRight)
{
    backLayer = currentViewSnap2;
    backLayer.layer.contentsGravity = kCAGravityLeft;
    frontLayer = nextViewSnap2;
    frontLayer.layer.contentsGravity = kCAGravityRight;
}else
{
    backLayer = nextViewSnap2;
    backLayer.layer.contentsGravity = kCAGravityLeft;
    frontLayer= currentViewSnap2;
    frontLayer.layer.contentsGravity = kCAGravityRight;
}

backLayer.frame = flipAnimationLayer.bounds;
backLayer.layer.doubleSided = NO;
backLayer.clipsToBounds = YES;
[flipAnimationLayer addSubview:backLayer];

frontLayer.frame = flipAnimationLayer.bounds;
frontLayer.layer.doubleSided = NO;
frontLayer.clipsToBounds = YES;
frontLayer.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1.0, 0);
[flipAnimationLayer addSubview:frontLayer];
if (flipDirection == AFKPageFlipperDirectionRight)
{
    CATransform3D transform = CATransform3DMakeRotation(0.0, 0.0, 1.0, 0.0);
    transform.m34 = 1.0f / 2500.0f;
    flipAnimationLayer.layer.transform = transform;
    currentAngle = startFlipAngle = 0;
    endFlipAngle = -M_PI;
} else
{

    CATransform3D transform = CATransform3DMakeRotation(-M_PI / 1.1, 0.0, 1.0, 0.0);
    transform.m34 = 1.0f / 2500.0f;
    flipAnimationLayer.layer.transform = transform;
    currentAngle = startFlipAngle = -M_PI;
    endFlipAngle = 0;
}

Answer 1

您的代码是旋转层，而不是视图。没关系。

我不希望你发布的代码有动画效果，因为层的背景视图不做隐式动画，你可以使用CABasicAnimation来制作动画。或者，可以为前视图和后视图创建图层，并将它们作为视图图层的子图层进行附着。如果这样做，则在层上操纵变换将使用隐式动画。

正如你所描述的，我所做的创建自己的字体来反向翻转就是伪造它

我分两步制作动画：首先从零度（平面）到90度（层变为不可见）。此时，我隐藏第一层，使第二层可见，以另一种方式旋转90度，然后将另一层旋转回零。这将创建与显示旋转背面相同的视觉效果。

如果使用隐式层动画来执行此操作，则需要将对变换的更改放在CATransaction块内，并将动画计时设置为线性，或者对前半部分使用缓进，对后半部分使用缓出。这是因为动画默认为缓进、缓出计时，第一个到90度的动画在结束时会减慢速度，然后第二个90度动画会缓进。