Android - Flip Animation not flipping smoothly

Question

I want to make my image to flip horizontally for 4 times, and at the same time scaling it down.

I have the following code for flipping:

ObjectAnimator flipAnimation = ObjectAnimator.ofFloat(view, "rotationY", 0.0f, 1440f);
flipAnimation.setDuration(4000);
flipAnimation.start();

And I have the following code in scale_down.xml for scaling down:

<scale
        android:duration="4000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.1"
        android:toYScale="0.1" >
    </scale>

However, when I run my app on emulator in eclipse, the flipping image shows an awkward effect. As you can see from the images, sometimes while flipping, one vertical side is longer than the other side, making a stretching effect, which is not what I want. Any helps to eliminate that effect?

Answer 1

That effect is called perspective distortion. And this is exactly what setCameraDistance() is for:

Sets the distance along the Z axis (orthogonal to the X/Y plane on which views are drawn) from the camera to this view. The camera's distance affects 3D transformations, for instance rotations around the X and Y axis. If the rotationX or rotationY properties are changed and this view is large (more than half the size of the screen), it is recommended to always use a camera distance that's greater than the height (X axis rotation) or the width (Y axis rotation) of this view.

The distance of the camera from the view plane can have an affect on the perspective distortion of the view when it is rotated around the x or y axis. For example, a large distance will result in a large viewing angle, and there will not be much perspective distortion of the view as it rotates. A short distance may cause much more perspective distortion upon rotation, and can also result in some drawing artifacts if the rotated view ends up partially behind the camera (which is why the recommendation is to use a distance at least as far as the size of the view, if the view is to be rotated.)

You may want to fiddle with the value, depending on the dimensions of the view and the visual effect you want to achieve. I got a good result with:

view.setCameraDistance(10 * view.getWidth());