在写登陆界面的时候我就在想一个问题——怎么样子才能让登陆的等待变得有所期待?自然是在登陆成功的时候直接就给用户直接展示应用的一个主页。所以基于这个思想,融合了之前看到的一些关于伪3D动画的Demo,写了这个登陆动画。
先看效果图:
整体思路
这个效果可以把它分解成以下两个部分:
(其实使用这种的实现方式是就我个人目前技术方向上的一个妥协,因为我个人对于ViewGroup的理解还不是特别的透彻)
页面消失
页面消失的话其实原理非常简单,就是将承载原来所有控件的根ViewGroup设置为透明,然后在上面附上一层显示截图的ImgView,然后控制ImgView的缩小即可
翻转
翻转这个地方借鉴了这篇博客里面的实现方式
https://blog.csdn.net/mr_immortalz/article/details/51918560
如果说单纯的使用View翻转180度来显示文字这样的代码实现就会变的非常复杂,所以翻转部分分成了两块:
- 原来的View翻转90度
- 新的TextView翻转-90度
在代码构成中会详细讲解
代码构成
这个效果的我把它设计成了一个小的VVM模式,总共分成了两部分
- 控制动画的ProgressControl
- 重写的ProgressImgView
- 动画计时器Rotate3dAnimation
接下来分开来讲这几个部分的作用
ProgressControl
ProgressControl正如其名,是用作整个动画的控制,承担了ViewModel的作用。这个类的设计非常简单,总共有以下几个方法:
public void setText(String text, @ColorInt int color)
public void setProgress(final int progress)
因为是专门为登录这一个场景设计的,所以并没有设计start或者是stop方法,以Progress代替。
ProgressImgView
这个View继承自android.support.v7.widget.AppCompatImageView目的是为了使得显示的图片有一个根据Progress消失的效果,所以在使用的时候只需要使用这个方法传入对应的百分比Progress即可
public void setProgress(int progress)
然后根据传入的Progress在onDraw方法中使用clipRect()方法,将canvas剪裁即可
canvas.save();
RectF rectF = new RectF(0, 0 + changeHeight * progress, getWidth(), getHeight() - changeHeight * progress);
canvas.clipRect(rectF);
super.onDraw(canvas);
canvas.restore();
Rotate3dAnimation
这个可以说是整个动画的核心部分,这个地方我大量借鉴了
http://www.gcssloop.com/customview/matrix-3d-camera
这个博客
这个类继承自Animation,在它的构造方法中需要传入
/**
* 创建一个绕y轴旋转的3D动画效果,旋转过程中具有深度调节,可以指定旋转中心。
*
* @param context <------- 添加上下文,为获取像素密度准备
* @param fromDegrees 起始时角度
* @param toDegrees 结束时角度
* @param centerX 旋转中心x坐标
* @param centerY 旋转中心y坐标
* @param depthZ 最远到达的z轴坐标
* @param reverse true 表示由从0到depthZ,false相反
*/
public Rotate3dAnimation(Context context, float fromDegrees, float toDegrees,
float centerX, float centerY, float depthZ, boolean reverse) {
mFromDegrees = fromDegrees;
mToDegrees = toDegrees;
mCenterX = centerX;
mCenterY = centerY;
mDepthZ = depthZ;
mReverse = reverse;
// 获取手机像素密度 (即dp与px的比例)
scale = context.getResources().getDisplayMetrics().density;
}
然后需要重写applyTransformation方法
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
float fromDegrees = mFromDegrees;
float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);
float centerX = mCenterX;
float centerY = mCenterY;
Camera camera = mCamera;
final Matrix matrix = t.getMatrix();
camera.save();
// 调节深度
if (mReverse) {
camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
} else {
camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
}
// 绕X轴旋转
camera.rotateX(degrees);
camera.getMatrix(matrix);
camera.restore();
// 修正失真,主要修改 MPERSP_0 和 MPERSP_1
float[] mValues = new float[9];
matrix.getValues(mValues); //获取数值
mValues[6] = mValues[6] / scale; //数值修正
mValues[7] = mValues[7] / scale; //数值修正
matrix.setValues(mValues); //重新赋值
// 调节中心点
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
更多的详细代码和解释,以及Camera相关的可以直接借鉴那篇博客(自己的水平有限,就不误导了)。
其他设置
在使用这个的时候仍然需要一些其他的设置,比如说在AndroidManifest中需要设置这个Activity的Theme(我已经将引用的部分换成了被引用的数值)
在xml中使用的时候需要将根Root设置为FrameLayout,以及将自定义的那个ImgView与实际承载控件的ViewGroup进行重合,这是这个控件的不足之处,在以后可能会对这方面进行优化和改正