Android动画之3D翻转动画

很多时候我们需要在界面中实现3D的点击发生动画翻转效果，现在我们就来实现一下这个效果。
1.首先我们实现一个动画类FlipAnimation继承Animation

package com.example.flip3ddemo;

import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.Transformation;

public class FlipAnimation extends Animation {
    private Camera camera;

    private float fromDegree;
    private float toDegree;

    private float centerX;
    private float centerY;
    private float depthZ;
    private boolean reverse;

    public FlipAnimation(float fromDegree, float toDegree, float centerX, float centerY,
            float depthZ, boolean reverse) {
        this.fromDegree = fromDegree;
        this.toDegree = toDegree;
        this.centerX = centerX;
        this.centerY = centerY;
        this.reverse = reverse;
        this.depthZ = depthZ;

        /**
         * 设置动画的差值器，决定了时间片的时间点
         */
        this.setInterpolator(new LinearInterpolator());
    }

    /**
     * 动画初始化函数
     */
    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        camera = new Camera();
    }

    /**
     * 动画调用的关键函数，在每一个动画时间片到达的时候调用，会调用多次，动画的差值器对它的执行频率直接影响
     * 
     * @param interpolatedTime 0.0f ~ 1.0f
     */
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {

        // 根据差值器差值，计算出该次显示，图片应该处于的角度
        float degree = fromDegree + (toDegree - fromDegree) * interpolatedTime;

        final Matrix matrix = t.getMatrix();
        camera.save();

        // 翻转过程中不断调整整个View的z轴景深，否则会出现翻转到一定位置，View消失，
        if (reverse) { // 0 - 90度时，调整z轴数值，让View往远离屏幕方向偏移
            camera.translate(0, 0, depthZ * interpolatedTime);
        } else { 
            // 270 - 360度，View快翻转完成，调整z轴数值，让View往靠近屏幕
            //（即用户）方向偏移，z值逐步恢复到0
            camera.translate(0, 0, depthZ * (1.0f - interpolatedTime));
        }
        camera.rotateY(degree);
        camera.getMatrix(matrix);  // 将camera旋转后参数与当前View的矩阵组合计算，得出新的矩阵
        camera.restore();

        // View的x左移到原点，y上移到原点，即让View中心位于坐标图原点位置
        // 以View中心为旋转中心
        matrix.preTranslate(-centerX, -centerY);
         // 旋转完成，恢复camera位置
        matrix.postTranslate(centerX, centerY);
    }
}

2.在Activity中的调用

package com.example.flip3ddemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.widget.ImageView;

public class MainActivity extends Activity implements OnClickListener {

    private ImageView mImageView1, mImageView2;
    private ViewGroup mOutLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mImageView1 = (ImageView) findViewById(R.id.img1);
        mImageView2 = (ImageView) findViewById(R.id.img2);
        mImageView1.setOnClickListener(this);
        mImageView2.setOnClickListener(this);
        mOutLayout = (ViewGroup) findViewById(R.id.out);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.img1:
            case R.id.img2:
                startAnim();
                break;
        }
    }

    private void startAnim() {
        Animation animation;
        animation = new FlipAnimation(0, 90, (float) mOutLayout.getWidth() / 2.0f,
                (float) mOutLayout.getHeight() / 2.0f, 67.5f, true);
        animation.setAnimationListener(new OLAnimationListener());
        animation.setDuration(1000);
        animation.setFillAfter(true);
        animation.setInterpolator(new AccelerateInterpolator());
        mOutLayout.startAnimation(animation);
    }

    private class OLAnimationListener implements AnimationListener {

        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            if (mImageView1.getVisibility() == View.GONE) {
                mImageView1.setVisibility(View.VISIBLE);
                mImageView2.setVisibility(View.GONE);
            } else {
                mImageView1.setVisibility(View.GONE);
                mImageView2.setVisibility(View.VISIBLE);
            }

            Animation anim;
            anim = new FlipAnimation(270, 360, (float) mOutLayout.getWidth() / 2.0f,
                    (float) mOutLayout.getHeight() / 2.0f, 67.5f, false);
            anim.setDuration(1000);
            anim.setFillAfter(true);
            anim.setInterpolator(new AccelerateInterpolator());
            mOutLayout.startAnimation(anim);

        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    }
}

翻转动画分两次完成，第一次从0翻转翻转到90，切换显示的View，第二次动画开始，从270度翻转到360度（即0度）

3.布局文件采用了FrameLayout布局，通过visibility属性在动画执行过程中控制显示

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/out"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/img1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clickable="true"
        android:src="@drawable/mm1"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clickable="true"
        android:src="@drawable/mm2" />

</FrameLayout>

没什么太大难度，附上源码供大家学习使用：
源码下载