Fold animation in UICollectionViewLayout

I want to achieve Fold animation when the user scrolls UICollectionView. I have UICollectionView with full-screen size cell and vertically scrolling with paging enabled. For that I've created sub-class of UICollectionViewFlowLayout which is as described below.

class FoldingFlowLayout: UICollectionViewFlowLayout {

    private let logger = Logger(subsystem: bundleIdentifier, category: "FlowLayout")

    override func prepare() {
        super.prepare()
        scrollDirection = .vertical
        minimumLineSpacing = 0
        minimumInteritemSpacing = 0
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)
        attributes?.forEach { attribute in
            transformLayoutAttributes(attribute)
        }
        return attributes
    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }

    private func transformLayoutAttributes(_ attributes: UICollectionViewLayoutAttributes) {
        guard let collectionView = collectionView else { return }

        let contentOffsetY = collectionView.contentOffset.y
        let cellOffsetY = attributes.frame.origin.y - contentOffsetY
        let cellHeight = attributes.frame.height

        var transform = CATransform3DIdentity
        transform.m34 = -1.0 / 500.0  // Apply perspective

        if cellOffsetY < cellHeight && cellOffsetY > -cellHeight {
            let angle = (cellOffsetY / cellHeight) * .pi / 2
            transform = CATransform3DRotate(transform, angle, -1, 0, 0)
            attributes.transform3D = transform
            attributes.alpha = 1.0 - (abs(cellOffsetY) / cellHeight)
        } else {
            attributes.transform3D = CATransform3DIdentity
            attributes.alpha = 1.0
        }
    }
}

But this is not working as I expected. I want to create replica of this kind of animation.

What am I missing here?

Answered by Engineer in 801764022

UICollectionView doesn't provide explicit support for custom animations, nor on cells since they are static and must be reloaded. You can write a custom scrollview with custom views that trigger animations based on swipe pattern to achieve this but this is not possible today on UICollectionView cells as you are limited to the built in options for UICollectionView, UITableView and UIPageView.

Rico

WWDR - DTS - Software Engineer

UICollectionView doesn't provide explicit support for custom animations, nor on cells since they are static and must be reloaded. You can write a custom scrollview with custom views that trigger animations based on swipe pattern to achieve this but this is not possible today on UICollectionView cells as you are limited to the built in options for UICollectionView, UITableView and UIPageView.

Rico

WWDR - DTS - Software Engineer

Fold animation in UICollectionViewLayout
 
 
Q