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