PART 1 — Creating a custom animation inspired by InVision Projects Space
Last year InVision posted a nice dribble interaction for their iOS app, I don’t think they ever released it in production. This tutorial is an example of how to achieve a similar interaction in Swift 3.
The interaction contains 2 main parts:
1. A collection view with a custom layout and a parallax effect on the main image.
2. A custom view controller transition, that animates the selected cell to the detail view controller.
In the first part, I’m only going to cover how to achieve the parallax effect of the collection view controller.
If you’re not familiar with creating a custom layout using UICollectionViewLayout, you should check out Apple’s WWDC videos.
1. Parallax effect
To achieve the parallax effect we need to understand how layout attribute works.
An
UICollectionViewLayoutAttributesobject manages the layout-related attributes for a given item in a collection view. Layout objects create instances of this class when asked to do so by the collection view. In turn, the collection view uses the layout information to position cells and supplementary views inside its bounds.
We want to add a custom layout attribute “parallaxValue”, so our cell can redraw the main image with a parallax.
We subclass UICollectionViewLayoutAttributes and add a variable named parallaxValue. UICollectionViewLayoutAttributes also required to conform to NSObject, NSCopying.
We need to tell our custom layout to use a custom layout attributes class rather then the default one. So we override layoutAttributesClass to return our custom InvisionCollectionViewLayoutAttributes class.
override class var layoutAttributesClass: AnyClass {return InvisionCollectionViewLayoutAttributes.self}
In the prepare method, we pre-calculate each element frame and add it to our custom layout attributes.
When returning the layout attributes for the current visible rectangle we calculate the parallaxValue and set it to our custom attribute var.
So far we have our custom layout calculating the parallax value for each cell, now we can use this value in the cell class.
In our custom cell we override apply(_ layoutAttributes: UICollectionViewLayoutAttributes), when attributes are updated this method is called and we can update mainImageView with a new frame position.
Congratulation! You’ve finished the first part! 💪🏾🙏🏾
What’s Next ?
Read on how to do a custom view controller transition Part 2 — Creating a custom animation inspired by InVision Projects Space
I hope you enjoyed this tutorial. You can download the final project here.
