IOS 7 CollectionViewFlowLayout 3D翻译(如新的Safari Tabviewer)

Question

我的问题

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

由于Apple引用了像"z-index"这样的东西,"转换"很容易实现.经过几天的教程和研究后,我无法做到.

我遵循了一些正常的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);