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(V
c763
iew.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>

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

源码下载