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?