前言

首先看一下小米中的加载动画是怎么样的，恩恩～～～～虽然只是张图片，因为录制不上全部，很多都是刚一加载就成功了，一点机会都不提供给我，所以就截了一张图，他这个加载动画特点就是左面圆圈会一直转。

仿照的效果如下：

实现过程

这个没有难度，只是学会一个公式就可以，也就是已知圆心，半径，角度，求圆上的点坐标，算出来的结果在这个点绘制一个实心圆即可，下面是自定义Dialog，让其在底部现实，其中的View也是自定义的一个。

class MiuiLoadingDialog(context: Context) : Dialog(context) {

    private var miuiLoadingView : MiuiLoadingView= MiuiLoadingView(context);

    init {

        setContentView(miuiLoadingView)

        setCancelable(false)

    }


    override fun show() {

        super.show()

        val window: Window? = getWindow();

        val wlp = window!!.attributes


        wlp.gravity = Gravity.BOTTOM

        window.setBackgroundDrawable( ColorDrawable(Color.TRANSPARENT));

        wlp.width=WindowManager.LayoutParams.MATCH_PARENT;

        window.attributes = wlp

    }

}

下面是主要的逻辑，在里面，首先通过clipPath方法裁剪出一个上边是圆角的形状，然后绘制一个外圆，这是固定的。

中间的圆需要一个公式，如下。

x1   =   x0   +   r   *   cos(a   *   PI   /180   ) 

y1   =   y0   +   r   *   sin(a   *   PI  /180   ) 

x0、y0就是外边大圆的中心点，r是中间小圆大小，a是角度，只需要一直变化这个角度，得出的x1、y1通过drawCircle绘制出来即可。

class MiuiLoadingView @JvmOverloads constructor(

    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0

) : View(context, attrs, defStyleAttr) {


    //Dialog上面圆角大小

    val CIRCULAR: Float = 60f;


    //中心移动圆位置

    var rx: Float = 0f;

    var ry: Float = 0f;


    //左边距离

    var MARGIN_LEFT: Int = 100;


    //中心圆大小

    var centerRadiusSize: Float = 7f;


    var textPaint: Paint = Paint().apply {

        textSize = 50f

        color = Color.BLACK

    }


    var circlePaint: Paint = Paint().apply {

        style = Paint.Style.STROKE

        strokeWidth = 8f

        isAntiAlias = true

        color = Color.BLACK

    }


    var centerCirclePaint: Paint = Paint().apply {

        style = Paint.Style.FILL

        isAntiAlias = true

        color = Color.BLACK

    }


    var degrees = 360;


    val TEXT = "正在加载中,请稍等";

    var textHeight = 0;


    init {


        var runnable = object : Runnable {

            override fun run() {

                val r = 12;

                rx = MARGIN_LEFT + r * Math.cos(degrees.toDouble() * Math.PI / 180).toFloat()

                ry =

                    ((measuredHeight.toFloat() / 2) + r * Math.sin(degrees.toDouble() * Math.PI / 180)).toFloat();

                invalidate()

                degrees += 5

                if (degrees > 360) degrees = 0

                postDelayed(this, 1)

            }

        }

        postDelayed(runnable, 0)



        var rect = Rect()

        textPaint.getTextBounds(TEXT, 0, TEXT.length, rect)

        textHeight = rect.height()

    }


    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

        setMeasuredDimension(widthMeasureSpec, 220);

    }


    override fun onDraw(canvas: Canvas) {

        super.onDraw(canvas)


        var path = Path()

        path.addRoundRect(

            RectF(0f, 0f, measuredWidth.toFloat(), measuredHeight.toFloat()),

            floatArrayOf(CIRCULAR, CIRCULAR, CIRCULAR, CIRCULAR, 0f, 0f, 0f, 0f), Path.Direction.CW

        );

        canvas.clipPath(path)

        canvas.drawColor(Color.WHITE)



        canvas.drawCircle(

            MARGIN_LEFT.toFloat(), measuredHeight.toFloat() / 2,

            35f, circlePaint

        )


        canvas.drawCircle(

            rx, ry,

            centerRadiusSize, centerCirclePaint

        )



        canvas.drawText(TEXT, (MARGIN_LEFT + 80).toFloat(), ((measuredHeight / 2)+(textHeight/2)).toFloat(), textPaint)

    }

}