Question

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

我正在尝试移植AFKPageFlipper's "initFlip" method以使用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度动画将缓和。

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

1 个答案: