IOS 7 CollectionViewFlowLayout 3D翻译（如新的Safari Tabviewer）

Question

我的问题

我想用CollectionViewFlowLayout实现一个看起来像Safari Pageviewer的CollectionView（见截图）

由于Apple引用了诸如“z-index”和“Transformations”之类的东西，因此很容易实现。 经过几天的教程和研究后，我无法做到。

我遵循了一些正常的CollectionViewFlowLayout并使其成为CollectionView FlowLayout的子类。现在我尝试了

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect

的

-(void)modifyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes

和

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

我试图给细胞一个3D变换。

但是从来没有调用layoutAttributesForItemAtIndex（找到了一些解释，但我并没有真正理解它）

尝试其他方法也不起作用（细胞上没有可见的3D转换。）

以下是我的尝试，以便您可以看到我尝试的内容：

//从未调用过这个

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{

    UICollectionViewLayoutAttributes *attributes =
    [super layoutAttributesForItemAtIndexPath:indexPath];


    [attributes setTransform3D:CATransform3DMakeTranslation(10.0, 20.0, 10.0)];
    attributes.transform3D = CATransform3DMakeScale(1.0, 2.0, 1.0);


    return attributes;
}

//调用了这个，但转换没有按预期工作。

 -(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
    {

        NSArray *allAttributesInRect = [super
                                        layoutAttributesForElementsInRect:rect];

        for (UICollectionViewLayoutAttributes *cellAttributes in allAttributesInRect)
        {
            cellAttributes.size=CGSizeMake(300, 300);
            cellAttributes.transform3D = CATransform3DMakeScale(1.0, 2.0, 1.0);
            cellAttributes.transform3D = CATransform3DMakeTranslation(1, 200, 100);


               [self modifyLayoutAttributes:cellAttributes];
        }
        return allAttributesInRect;
    }

//这也行不通

-(void)modifyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes
{
    if ([layoutAttributes.indexPath isEqual:_currentCellPath])
    {

         Assign the new layout attributes
        layoutAttributes.size = CGSizeMake(300, 300);
        layoutAttributes.transform3D = CATransform3DMakeScale(_currentCellScale, _currentCellScale, 1.0);
        layoutAttributes.center = _currentCellCenter;
    }
}

这是我的问题：

有人有任何想法如何实现这个“Coverflow”式的CollectionView并且可以帮助我吗？

我是以错误的方式使用CollectionViewFlowLayout的方法还是以错误的方式使用CATransform3D？

感谢

Answer 1

GitHub项目WKPagesCollectionView和NFSafariTabs显示了如何实现这一目标。

    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

    // rotation
    CGFloat angleOfRotation = -61.0;
    CATransform3D rotation = CATransform3DMakeRotation((M_PI*angleOfRotation/180.0f), 1.0, 0.0, 0.0);

    // perspective
    CGFloat depth = 300.0;
    CATransform3D translateDown = CATransform3DMakeTranslation(0.0, 0.0, -depth);
    CATransform3D translateUp = CATransform3DMakeTranslation(0.0, 0.0, depth);
    CATransform3D scale = CATransform3DIdentity;
    scale.m34 = -1.0f/1500.0;
    CATransform3D perspective =  CATransform3DConcat(CATransform3DConcat(translateDown, scale), translateUp);

    // final transform
    CATransform3D transform = CATransform3DConcat(rotation, perspective);

Answer 2

这可能无法完全回答您的问题，但this question会告诉您如何透视旋转视图。在尝试使用代码后，我将m34更改为m24，将-500更改为500。

最终代码看起来像这样：

CALayer *layer = myView.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m24 = 1.0 / 500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;

希望这有帮助！