3D cube transition in Android

android

Solution

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

Problem

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.

Original source

Related problems