3D cube transition in Android [closed]

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.

Answer 1

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).

Answer 2

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.