3D cube transition in Android [closed]

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

Leave a Comment