IOS 7 CollectionViewFlowLayout 3D Translation(像新的 Safari Tabviewer)

Question

我的问题

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

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

我遵循了一些普通的 CollectionViewFlowLayout 并使其成为 CollectionViewFlowLayout 的子类。现在我尝试了

-(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;
}

//这个被调用了，但是 Transformation 没有按预期工作。

 -(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;
    }
}

这是我的问题:

有人知道如何实现类似 CollectionView 的“Coverflow”并且可以帮助我吗？

我是不是以错误的方式使用了 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);