自定义View3——一个登陆动画ProgressImgView

在写登陆界面的时候我就在想一个问题——怎么样子才能让登陆的等待变得有所期待?自然是在登陆成功的时候直接就给用户直接展示应用的一个主页。所以基于这个思想,融合了之前看到的一些关于伪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进行重合,这是这个控件的不足之处,在以后可能会对这方面进行优化和改正



    

    

    


你可能感兴趣的:(自定义View3——一个登陆动画ProgressImgView)