最近在研究iphone上的翻转效果,就是类似于passbook里面的查看票据的时候,正面是一种布局,点击某个按钮会翻转到背面,然后呈现的又是另一个布局。就在想怎么用到android里面呢?正好,最近项目有这个需求。于是便上网搜寻有关android的翻转动画的资料。在网上找到原来apidemos里面就提供了翻转动画,不过是针对图片的翻转,但是我想只要有动画就是一样的调用,管它图片还是布局呢,最后还不是xxx.startAnimation。翻转动画如下,如果没有apidemos的童鞋可以直接拿去用。
package com.huiian.kelu.util;
import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class Rotate3dAnimation extends Animation {
private final float fromDegrees;
private final float toDegrees;
private final float centerX;
private final float centerY;
private final float depthZ;
private final boolean reverse;
private Camera camera;
public Rotate3dAnimation(float fromDegrees, float toDegrees, float centerX,
float centerY, float depthZ, boolean reverse) {
this.fromDegrees = fromDegrees;
this.toDegrees = toDegrees;
this.centerX = centerX;
this.centerY = centerY;
this.depthZ = depthZ;
this.reverse = reverse;
}
@Override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
camera = new Camera();
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final float fromDegrees = this.fromDegrees;
float degrees = fromDegrees
+ ((toDegrees - fromDegrees) * interpolatedTime);
final float centerX = this.centerX;
final float centerY = this.centerY;
final Camera camera = this.camera;
final Matrix matrix = t.getMatrix();
camera.save();
if (reverse) {
camera.translate(0.0f, 0.0f, depthZ * interpolatedTime);
} else {
camera.translate(0.0f, 0.0f, depthZ * (1.0f - interpolatedTime));
}
camera.rotateY(degrees);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
}
有了这个动画类之后,就可以像调用android基本动画的方式来调用了,因为大家可以看到这个翻转动画是继承于Animation的。那具体该如何实现布局的翻转呢?首先你的布局代码是:
<FrameLayout android:id="@id/main_fl" android:layout_width="214dp" android:layout_height="246dp" android:layout_centerInParent="true" android:orientation="vertical" android:visibility="invisible" > <include layout="@layout/zheng" /> <include layout="@layout/fan" /> </FrameLayout>
一个正,一个反,剩下的你自己布局就行。
剩下的在Activity里面的用法apidemos也给出了,大家只需要把一些布局替换成自己的就行了。好了,这个时候坑爹的来了,因为你会发现翻转过去的布局是倒着的,我被这个鬼东西折腾了好久,因为我发现apidemos里面的例子也是这样的,它的图片也是倒的。这让人情何以堪。于是试了许久终于解决了。首先我们定义一个记录正反的bool值
private boolean nowZhengFan = true;// 默认当前是正面
然后我们是点击布局来切换正反面的,所以将布局设置OnClickListener监听。然后在onClick方法里面写:
case R.id.main_fl:
if(nowZhengFan) {
applyRotation(0, 0, 90);
} else {
applyRotation(-1, 360, 270);
}
break;
private void applyRotation(int position, float start, float end) {
float centerX = mainFL.getWidth() / 2.0f;
float centerY = mainFL.getWidth() / 2.0f;
final Rotate3dAnimation animation = new Rotate3dAnimation(start, end,
centerX, centerY, 310.0f, true);
animation.setDuration(500);
animation.setFillAfter(false);
animation.setInterpolator(new AccelerateInterpolator());
animation.setAnimationListener(new DisplayNextView(position, true));
mainFL.startAnimation(animation);
}
private class DisplayNextView implements AnimationListener {
private int position;
private boolean b;
public DisplayNextView(int pos,boolean b) {
this.b = b;
this.position = pos;
}
@Override
public void onAnimationEnd(Animation animation) {
mainFL.post(new Swap(position));
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationStart(Animation animation) {
}
}
private class Swap implements Runnable {
private int position;
public Swap(int pos) {
this.position = pos;
}
@Override
public void run() {
float centerX = missionFL.getWidth() / 2.0f;
float centerY = missionFL.getWidth() / 2.0f;
Rotate3dAnimation rotation = null;
if(position > -1) {
rotation = new Rotate3dAnimation(270, 360, centerX, centerY, 310.0f, false);
zheng.setVisibility(View.GONE);
fan.setVisibility(View.VISIBLE);
nowZhengFan = false;
} else {
rotation = new Rotate3dAnimation(90, 0, centerX, centerY, 310.0f, false);
zheng.setVisibility(View.VISIBLE);
fan.setVisibility(View.GONE);
nowZhengFan = true;
}
rotation.setDuration(500);
rotation.setFillAfter(false);
rotation.setInterpolator(new DecelerateInterpolator());
mainFL.startAnimation(rotation);
}
}
这里的关键是点击之后的第一次翻转是0--90度,然后调用swap进行第二次翻转,apidemos里面的是90-180度,但是这样就会导致布局是反的,于是要改成270-360度,这样就ok了。如果是翻回去,那么就是在点击之后是360-270度,这样就成功了。大家可以试试。