How does the Instagram Stories cube transition in iOS?

Question

When scrolling through stories in Instagrams, the new “Stories” function (you know that a cubic transition when moving from one story to another) I can’t understand how they do it!

First of all, if you delve into the functionality, you will find that it works in exactly the same way as the UIPageViewControllers transition:

- He bounces when moving quickly from one look to another.
- You can pause the swipe in the middle of the transition by touching the screen.

The developed team could not use the solution based on the more well-known workarounds, for example:
https://www.appcoda.com/custom-view-controller-transitions-tutorial/
Because, as far as I know, my two statements above cannot be achieved with anything other than PageViewController.

It seems to me that the Instagram development team has gained access to the new transition style for PageViewController, also known as Cube scrolling, or is it a workaround that I don't know about?

Any ideas?

Answer 1

I tried to recreate this functionality some time ago. You can check the source code on GitHub: https://github.com/oyvind-hauge/OHCubeView

I use the scroll view (with paging enabled), and for each subset I manipulate them as a function of the given current x-offset in the scroll view. Actual animations are performed at each subset level using Core Animation (more specifically, transforming the identity matrix specified by CATransform3DIdentity using the CATransform3DRotate method).

Shadow effects are also applied to subview layers (view.layer.opacity), and the size of the shadow is determined by what part of the image is displayed on the screen.

My implementation solves both of your problems (bouncing when scrolling, may pause scrolling). I am sure that this could be implemented using the UIPageViewController, but I hate working with them.

Answer 2

I think you overdid the controller part here. The effect can be easily achieved using the CATransformLayer structure and a triangular cubic structure, where there is one view that aligns with the plane of the screen, and the other two are rotated -90 and 90 degrees along their y axis. Then, having received a panorama gesture to rotate the scene. After a successful 90-degree rotation (in any direction), you can either quickly reset the scene (so that the rotation continues, as if it were continuing, but the camera actually moved back to its original position), or you can have a full 360-degree rotation and just update the previous ones and the following "pages". One controller can handle this scene. If you prefer to have each page as a controller, you can still use one controller for the scene, then use the page controllers as child controllers and define your views as described above.

For more information on CATransformLayer see this article . Their example is already creating something close to what you need.