我们如何在 3D 空间中同时旋转 2 个 UIView 平面

Question

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

我正在尝试移植 AFKPageFlipper's "initFlip" method 以使用 UIView 而不是 UIImage。

以下是我尝试移植它的 sn-p。初始页面翻转有效，但代码中的“前层”似乎没有出现。好像我无法看到页面的后端。当我翻页时，动画最初是正确的（背面层很好），但是页面的另一侧（正面层），我看到了第一页的倒置视图（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 使其动画。或者，您可以为前视图和后视图创建​​图层并将它们附加为视图图层的子图层。如果你这样做，那么在图层上操作变换将使用隐式动画。

按照您的描述，我创建自己的字体到后翻页所做的就是伪造它。

我分两步制作动画：首先从 0 度（平面）到 90 度（图层变得不可见）。在那一刻，我隐藏了第一层并使第二层可见，反之旋转 90 度，然后然后将另一层旋转回零。这会产生与显示旋转背面相同的视觉效果。

如果您使用隐式图层动画来执行此操作，您需要将变换的更改放在 CATransaction 块中并将动画时间设置为线性，或者在前半部分使用缓入，在前半部分使用缓出下半场。这是因为动画默认是缓入缓出时序，第一个90度的动画最后会变慢，然后第二个90度的动画会缓入。