Android自定义动画--卡牌翻牌动画

Android系统中自带了四种动画,但是都只是平面上的并不能实现我们很常见的翻牌动画,所以今天我们就要通过自定义动画来实现翻牌动画.

要实现翻牌动画,我们需要了解三个类,一个是matrix类,一个是camera类,一个是animation类.

1.matrix类是一个3x3的矩阵,用于控制图像和view的平移,旋转,放缩及斜割,官方封装了针对这些的操作给我们,我们只需要采用其中的matrix.setTranslate();matrix.setRotate();matrix.setScale();方法就可以完成一系列复杂的变换,如果想细致了解matrix的话可以参考http://www.360doc.com/content/11/1215/11/7635_172396706.shtml.下面举一个matrix实现图像变换的简单例子:

public class MyView extends View {

private Bitmap mBitmap;

private Matrix mMatrix = new Matrix();

public MyView(Context context) {

super(context);

initialize();

}

private void initialize() {

mBitmap = ((BitmapDrawable)getResources().getDrawable(R.drawable.show)).getBitmap();

float cosValue = (float) Math.cos(-Math.PI/6);

float sinValue = (float) Math.sin(-Math.PI/6);

mMatrix.setValues(

new float[]{

cosValue, -sinValue, 100,

sinValue, cosValue, 100,

0, 0, 2});

}

@Override protected void onDraw(Canvas canvas) {

//		super.onDraw(canvas);  //当然，如果界面上还有其他元素需要绘制，只需要将这句话写上就行了。

canvas.drawBitmap(mBitmap, mMatrix, null);

}

}

2.camera类,通过使用camera类可以对图片或view进行三维空间的变换,提供了以下常用方法:

1)getMatrix(Matrix matrix),将camera所做的变换应用到制定matrix中.

2)rotateX(float deg):将目标组件沿X轴旋转

3)rotateY(float deg):将目标组件沿Y轴旋转

4)rotateZ(float deg):将目标组件沿Z轴旋转

5)translate(float x,float y,float z):把目标组件在三维空间里进行位移变换

6)applyToCanvas(Canvas canvas):把camera所做的变换应用到canvas中.

3.继承animation,继承animation时关键是要重写该抽象基类的applyTransformation(float interpolatedTime,Transformation t)方法,该方法中两个重要参数说明如下:

1)interpolatedTime:代表动画的时间进行比.不管动画实际持续时间如何,当动画播放的时候,该参数总是从0到1变化的.

2)Transformation :该参数代表了补间动画在不同时刻对图形或组件的变形程度.该对象里封装了一个Matrix对象,对他所包装的Matrix对象进行位移,倾斜,旋转等变换时,Transformation将会控制对应的图片或视图进行相应的变换.

接下来,我们看一下我们实现自定义动画的代码:

public class CardInvertAnimation extends Animation{
//动画的中心点
private float centerX,centerY;
//动画的持续时间
private int duration;
private Camera camera = new Camera();

public CardInvertAnimation(float centerX, float centerY, int duration) {
super();
this.centerX = centerX;
this.centerY = centerY;
this.duration = duration;
}
@Override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
// TODO Auto-generated method stub
super.initialize(width, height, parentWidth, parentHeight);
//设置动画的持续时间
setDuration(duration);
//设置动画结束后效果保留
setFillAfter(true);
//设置动画差值器为线性
setInterpolator(new LinearInterpolator());

}
/* 该方法的interpolatedTime代表动画时间因子,不论duration时间为多少,它的取值范围都为0-1
* @interpolatedTime 总是从0-1
* @t 包含了view的矩阵,我们可以改变他的矩阵,进行动画.
*/
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
// TODO Auto-generated method stub
super.applyTransformation(interpolatedTime, t);
camera.save();
//根据interpolatedTime来控制x,y,z上的偏移
//		camera.rotateY(180*interpolatedTime);;
//获取Transformation中的matrix,并将对应变换应用到matrix上
Matrix matrix = t.getMatrix();
camera.getMatrix(matrix);

matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
camera.restore();
}
}

这里我们要说明一下matrix.preTranslate(-centerX, -centerY);matrix.postTranslate(centerX, centerY);这两个方法的作用,我们知道我们view的坐标系是从(0,0)点开始的,也就是说,如果我们不将matrix的中心点提前移动(0,0)点,我们的翻牌动画会绕着view的左侧进行旋转,所以我们要使用这两个方法来进行matrix中心点的变化,pretranslate是指在rotate之前进行平移操作,postTranslate是在rotatle之后进行平移操作.这样就保证了我们得到的效果是沿着中心点的Y轴进行180度旋转的动画.

下面我们看一下如何使用这个 自定义动画,理想的状态下我们只需要找个view给他setAnimation就好了,但是我们要获取view的中心点,这里会出现一个问题,在oncreate方法中我们获取onMeasureHeight和onMeasureWidth得到值为0,原因是在oncreate方法中,我们的view并没有测量和加载完成,所以我们需要在view加载完成后第一时间得到通知,方便我们获取height和width,经过查阅,我们发现在view加载完成后会调用一个叫onWindowFocusChanged(Boolean
hasFocus)的方法,所以我们可以override找个方法,在里面进行height和width的获取,代码如下:

public class MainActivity extends Activity {
ImageView ig;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ig = (ImageView) findViewById(R.id.ig);

}

/* view加载完成后首先调用的方法
*
*/
@Override
public void onWindowFocusChanged(boolean hasFocus) {
// TODO Auto-generated method stub
super.onWindowFocusChanged(hasFocus);
CardInvertAnimation a = new CardInvertAnimation(ig.getWidth() / 2,
ig.getHeight() / 2, 5000);
ig.setAnimation(a);

}
}