Cube Transition effect c# base in Instagram Stories and Android view pager

Hello all, I´m quite bad programming and new in this community and I need some help:

I want to do a transition with unity similar to this giff atached. Basically is the same type of transition as instagram stories and android view pager does. I know is complicated and it´s done in other platforms and languages, but I really need to do it with unity and c#. I´m really lost and I don´t even know how to start solving the problem (3D?, 2D?, images?, cube?).



Also I´m doing this for 16:9 and 4:3 resolutions so I need to do it adaptative... So another level of difficulty.

I will apreciate if someone can help me. Thanks in advance and tell me if there is something wrong in this post or if you need more information.

 

Since you are using a 3D engine, I think the best way to get this rotation-like effect will be to actually rotate things.

But you haven't said what you need to transition in this way. Hopefully it's not Unity UI elements, as that will be harder (and require a different approach). If it's textures or some such, then just throw them up on (say) a Quad, stretched to fit the screen, and positioned inside an otherwise empty GameObject which defines the center of the rotation. Then just rotate that GameObject.

You can test all this with no code at all — just manually set those things up in the scene, and manually rotate the parent GameObject, while watching your properly-sized Game tab. See if you like the look. Then you can start in on the script to do the same thing from code.

 

First of all, thanks for the reply!

I don´t need to use it for UI elements so the approach could be what you propound. I´ve try what you said and it works but not like the effect I want to achive.

My steps to do it where:
- Create 4 Quads forming a square
- Set the size of those quads to fill the camera view
- Create an empty GameObject and place it as the center of my rotation (that is also the center of that square)
- Parent the quads as childs of that empty object
- Rotate as you told me.

Doing that, you will realize that due to the perspective, when you rotate that square, you lose the quad´s vertex out of the camera. To fix this you have to move the cube at the same time as you rotate it, moving it away and bringing it closer to the camera. But I can´t find the relation between the rotation and the translation to make the effect as the one I ask.

Getting back to the point of the question, I want to highlight that in the giff I posted, you can see that the vertex of that cube seems to be sliding, anchored to the top and the bottom of the screen. That´s the key thing to achive the effect.

Again thanks for the reply and if you have any other ideas or comments to help me on this I will be looking forward to your answer!

 

you have two animations you should do over time when you change:

- one 90 degree rotation around the center this is easy, just rotate the object, use anything you want (Lerp, Tween, etc)
- one U-shape upside down curve when you move this four planes together back and forth

If you execute these in the Update method, you can use an actual curve to drive your movement animation: AnimationCurve and you can get the value of the curve at certain point with the Evaluate method

 

Hmm, yes you're right, I didn't think of that — the cube is moving away during the turn so that the corners don't get clipped.

In that case, I think the best way to tackle it is with an animation. In fact you don't need any code (except perhaps something to trigger the animation); you can have the animation itself do both the rotation and the translation (position change).

To do this, you'll need to learn how to create and work with animations in Unity. Go here, and spend a bit of time working your way through the tutorials. Then come back to this, and you'll have it solved very quickly.

 

Nice ideas, now at least I know how to start, so thanks!

I need to control the animation by code because my idea is to do it with the finger in a mobile device. I dind´t know anything about the "AnimationCurve" and the "Evaluate method", with that maybe I can do what I wanted. I will try this and also spend a bit of time with the animation tutorials. Im always open minded to learn new things and ways to solve a problem!.

Again thanks both replys and I will keep this post updated with my conclusions, also if I can reach the efect by code, I will upload it so other people can use it if they want.

Feel free to upload other ideas/code/comments!

 

Hi @Hurts just came across this looking for something else, but I'm intrigued...

Did you managed to make it work? If so, using animations or code?