3D cube transition in Android

Question

I want to make a screen (or part of the screen) switch to another part in a 3D cube-like transition. I'm talking about 2 normal Android UI parts, not raw graphics rendered on a canvas.

How would you approach this?

Thanks

UPDATE

The project was cancelled a long time ago so I didn't get to implement this. If the answer below works, please comment so on the answer and I'll mark it as correct.

Did you ever get this implemented? I am looking for the same answer. — storm_to, Jul 15 '11 at 16:57
Since you cannot compose a Cube-like animation with the crappy standard Animation subclasses - and you cannot specify custom Animation implementations in XML this should be pretty "unfixable", refer to [this bug](http://code.google.com/p/android/issues/detail?id=7824) which has received no love from Google. — Jens, Feb 08 '12 at 10:33
The project was cancelled a long time ago so I didn't get to implement this. If the answer below works, please comment so on the answer and I'll mark it. — SirKnigget, May 15 '13 at 12:28
To the guy who closed the question - what is not clear here? 3D cube-like transition seems like a very precise description. The question was upvoted 13 times so I guess most readers understand it. Looking at the tags in your profile, I don't even see 'Android' there - why mess around with questions in knowledge areas you don't understand? — SirKnigget, Jun 08 '13 at 02:23
Some people in stack overflow really embarrass the entire moderator group, this guy who closed is a .NET developer. I really doubt how much he understands about android — Girish Nair, Feb 04 '14 at 09:50

score 21 · Answer 1 · edited Feb 10 '12 at 16:38

I suppose you want a transaction like this

Ok let's say you have a viewswitcher with 2 children. You need to access each child separately when they draw. You can do that by extending the ViewSwicher class to your own MyViewSwitcher and enable static transformations

public class MyViewSwitcher extends ViewSwitcher {


//DO THAT FOR ALL CONSTRUCTORS
    public PViewSwitcher(Context context) {
        super(context);
               setStaticTransformationsEnabled(true); 
               ....
    }



        //Now you have to override getChildStaticTransformation
            @Override
            protected boolean getChildStaticTransformation(View child, Transformation t) {

   //enable drawing cache to each child to get  smoother transactions
  child.setDrawingCacheEnabled(true);

        //To identify if the child is the first or the second of the viewSwitcher do that
       if (child == getChildAt(0)) {
                //Here i will transform the first child


             }
       if (child == getChildAt(1)) {
                //Here i will transform the second child

             }   


    return true;
        }

**

Now the position part.

** What you need to know is the position of each child. You can do that by getting the position of each child relative to its parent. child.getLeft() does that for you. and float centerChild = child.getLeft()+(child.getWidth()/2f) . Whatever animation you do has to have centerChild as a reference.

So you can tell rotate the child to the x axis based on the distance it's center ( centerChild) has from the parents distance (getWidth()/2f) .

So

float distanceFromCenter = getWidth() -centerChild;

Now you have your reference points.

**

Now to the transformations part.

**

You have to alter the transformation. To do that you have to access it's matrix.

//Setup the matrix and alter it
 Matrix matrix = t.getMatrix();
 t.clear();
 t.setTransformationType(Transformation.TYPE_MATRIX);

//Here you can play with the matrix.. so by doing

matrix.postTranslate(-distance, 0);

you already get a funny looking animation.

Then let's rotate the image based on it's position.

matrix.postRotate(distance /40f);
matrix.preTranslate(-child.getWidth()/2f , -child.getHeight()/2f);
matrix.postTranslate(child.getWidth()/2f , child.getHeight()/2f);

You get a funny looking rotation when the viewswitcher animates.

**

Now to the 3D Part!

**

Android gives access to the camera class. android.graphics.Camera

What camera class does is it modifies the 3x3 matrix and provides 3D transformations.

Inside getChildStaticTransformation()...

    Camera mCamera;
    mCamera.save();
    mCamera.rotateY(distance/40f); //you should divide by the parent's width so your       rotation values are 0>=rotation >= MAX_ROTATION
    mCamera.getMatrix(matrix);
   mCamera.restore();

So now to get your 3D cude animation just figure the rotation values based on the parent distance and apply it to each child with

mCamera.rotateX(deg).

Can i get any sample Regarding this, i am implementing in my project — NikhilReddy, Mar 25 '13 at 10:14
Since this answer got upvoted but no one reported that it actually works (and my project was cancelled a long time ago), please comment if the answer works. If it does, I'll mark it as the answer. — SirKnigget, Mar 10 '14 at 08:58
Check out here for demo `http://stackoverflow.com/questions/13245031/how-to-implement-cube-transition-effect-animation-on-viewpager-in-android/27774196#27774196` — Stephen, Jan 05 '15 at 06:04

Reno · Answer 2 · 2012-08-01T12:15:26.050

1

Animations between Inter-activity transitions can be done by using overridePendingTransition().

Here is a pretty good tutorial to start.

Jelly beans has support for LayoutTransistion and ViewPropertyAnimator but I don't think even armed with this, you'll be able to pull off 3D cube transistions.

edited Aug 01 '12 at 12:15

answered Mar 17 '11 at 14:00

Reno

33,594
11
89
102

2

the tutorial itself has nothing to do with the 3d cube like animation. +1 anyway :) – WarrenFaith Mar 17 '11 at 14:07
Yeah I know thanks :) I'm hoping OP will have to animate that himself. If I do find a way (without using the usual graphics on canvas method) I'll edit my answer. – Reno Mar 17 '11 at 14:12
@Reno how to solve this issue? – Parag Chauhan Aug 01 '12 at 11:47

3D cube transition in Android

2 Answers2

Linked