看那些iPhone的view的切换效果非常帅,今天研究了一下从一个view到另一个view的切换翻转的效果,现在和大家分享一下
我先重写了Animation类,然后在类里先写一个接口,用来传递动画进度的
/** 用于监听动画进度。当值过半时需更新的内容。 */
private InterpolatedTimeListener listener;
public void setInterpolatedTimeListener(InterpolatedTimeListener listener) {
this.listener = listener;
}
/** 动画进度监听器。 */
public static interface InterpolatedTimeListener {
public void interpolatedTime(float interpolatedTime);
}
写实例方法,保存view的中心坐标和需要的动画类型
public RotateAnimation(float cX, float cY, boolean type) {
centerX = cX;
centerY = cY;
this.type = type;
// 设置动画时长
setDuration(DURATION);
}
再在initialize方法中初始化Camera
@Override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
// 在构造函数之后、applyTransformation()之前调用本方法。
super.initialize(width, height, parentWidth, parentHeight);
camera = new Camera();
}
最后在applyTransformation方法中实现动画效果
@Override
protected void applyTransformation(float interpolatedTime,
Transformation transformation) {
// interpolatedTime:动画进度值,范围为0~1,0.5为正好翻转一半
if (listener != null) {
listener.interpolatedTime(interpolatedTime);
}
float from = 0.0f, to = 0.0f;
if (type == ROTATE_DECREASE) {
from = 0.0f;
to = 180.0f;
} else if (type == ROTATE_INCREASE) {
from = 360.0f;
to = 180.0f;
}
// 旋转的角度
float degree = from + (to - from) * interpolatedTime;
boolean overHalf = (interpolatedTime > 0.5f);
if (overHalf) {
// 翻转过半的情况下,为保证数字仍为可读的文字而非镜面效果的文字,需翻转180度。
degree = degree - 180;
}
// 旋转深度
float depth = (0.5f - Math.abs(interpolatedTime - 0.5f)) * DEPTH_Z;
final Matrix matrix = transformation.getMatrix();
camera.save();
// 深度——》相当于与屏幕的距离
camera.translate(0.0f, 0.0f, depth);
// 以x轴旋转
// camera.rotateX(degree);
// 以y轴旋转
camera.rotateY(degree);
camera.getMatrix(matrix);
camera.restore();
if (DEBUG) {
if (overHalf) {
matrix.preTranslate(-centerX * 2, -centerY);
matrix.postTranslate(centerX * 2, centerY);
}
} else {
// 确保图片的翻转过程一直处于组件的中心点位置
/*
* preTranslate是指在setScale前平移,postTranslate是指在setScale后平移,它们参数是平移的距离,
* 而不是平移目的地的坐标!
* 由于缩放是以(0,0)为中心的,所以为了把界面的中心与(0,0)对齐,就要preTranslate(-centerX,
* -centerY),setScale完成后, 调用postTranslate(centerX,
* centerY),再把图片移回来,这样看到的动画效果就是activity的界面图片从中心不停的缩放了
* 注:centerX和centerY是界面中心的坐标
*/
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
}
其中如果camera.rotateX(degree)这样是以x轴翻转,camera.rotateY(degree)是以y轴翻转。
这样就写完RotateAnimation类了
下面让我们来看一下MainActivity类,是怎么调用的
先求出view的中心坐标
float cX = m_main_rl.getWidth() / 2.0f;
float cY = m_main_rl.getHeight() / 2.0f;
然后初始化RotateAnimation
rotateAnim = new RotateAnimation(cX, cY,RotateAnimation.ROTATE_DECREASE);
然后在动画运行到一半的时候做一些操作就行了,我这里偷懒就是把一个view隐藏把另一个view显示出来,你们可以addview和removeview。
@Override
public void interpolatedTime(float interpolatedTime) {
// 监听到翻转进度过半时,更新txtNumber显示内容。
if (enableRefresh && interpolatedTime > 0.5f) {
setHint();
enableRefresh = false;
}
}
public void setHint() {
m_login_ll.setVisibility(View.GONE);
m_option_ll.setVisibility(View.GONE);
if (btn_id == R.id.hz_login_btn) {
m_option_ll.setVisibility(View.VISIBLE);
} else if (btn_id == R.id.hz_logout_btn) {
m_login_ll.setVisibility(View.VISIBLE);
}
}
这样从一个view到另一个view的翻转效果就实现了,其实方法很简单。