仿iphone实现两个view切换翻转动画

看那些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的翻转效果就实现了，其实方法很简单。