Kotlin动态图

前言

在网页在看见小米动态图的实现，最近正在学习kotlin，就准备自己也实现一个，

参考实现（建议先读）：https://blog.csdn.net/u013094278/article/details/75450534

一、实现一个三角形的变化：

1、计算三角形坐标

mLength是高，mStartX,mStartY是开始坐标，offset边长，自己设置开始位置

val offset = (mLength * 2 / Math.sqrt(3f.toDouble())).toFloat()
mTriangleEntity.startX = mStartX
mTriangleEntity.startY = mStartY

mTriangleEntity.endX1 = mStartX - mLength
mTriangleEntity.endX2 = mStartX - mLength

mTriangleEntity.endY1 = mStartY - offset / 2
mTriangleEntity.endY2 = mStartY + offset / 2

2、使用drawPath来绘制三角形

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        canvas ?: return

        mPath.reset()
        mPath.moveTo(mTriangleEntity.startX, mTriangleEntity.startY)
        mPath.lineTo(mTriangleEntity.currentX1, mTriangleEntity.currentY1)
        mPath.lineTo(mTriangleEntity.currentX2, mTriangleEntity.currentY2)
        mPaint.color = color1
        canvas.drawPath(mPath, mPaint)
    }

3、使用valueAnimator来生成动态数据，使图形变化

 private fun doAnimator() {
        mValueAnimator.addUpdateListener {
            val data = it.animatedFraction

            mTriangleEntity.apply {
                currentX1 = startX + data * (endX1 - startX)
                currentX2 = startX + data * (endX2 - startX)
                currentY1 = startY + data * (endY1 - startY)
                currentY2 = startY + data * (endY2 - startY)
            }

            invalidate()
        }

        mValueAnimator.start()
    }

二、实现多个三角形

基本原理和一个三角形动态变化是一样的，我们只需要初始化好三角形，然后按照顺序进行相应的变化绘制就可以

1、初始化三角形

一共4个三角形，6个点，先定义start点，其他经过计算出来就行

private fun initTriangle() {

        val offset = (mLength * 2 / Math.sqrt(3f.toDouble())).toFloat()
        //最右边的点
        val point1 = TrianglePoint(mStartX, mStartY)
        //最上面的点
        val point2 = TrianglePoint(mStartX - mLength, mStartY - offset / 2)
        //最下面的点
        val point3 = TrianglePoint(mStartX - mLength, mStartY + offset / 2)

        val point4 = TrianglePoint(mStartX - mLength / 2, mStartY + offset / 4)
        val point6 = TrianglePoint(mStartX - mLength / 2, mStartY - offset / 4)
        val point5 = TrianglePoint(mStartX - mLength, mStartY)

        mTriangles = arrayOfNulls(4)
        mTriangles[0] = TriangleEntity(point4, point6, point5, null, null, color1)
        mTriangles[1] = TriangleEntity(point5, point6, point2, null, null, color2)
        mTriangles[2] = TriangleEntity(point6, point4, point1, null, null, color3)
        mTriangles[3] = TriangleEntity(point4, point5, point3, null, null, color4)

    }

2、执行顺序

用枚举状态来控制执行，设置动画一直执行，在重复回调方法中控制进度

private enum class LoadStatus {
        MID_LOADING,
        FIRST_LOADING,
        SECOND_LOADING,
        THIRD_LOADING,
        THIRD_DISMISS,
        FIRST_DISMISS,
        SECOND_DISMISS,
        MID_DISMISS,
        LOADING_COMPLETE
    }

mValueAnimator.addListener(object : Animator.AnimatorListener {
            override fun onAnimationRepeat(animation: Animator?) {
                LogUtils.e("onAnimationRepeat.....1" + mCurrentStatus.name)
                    mCurrentStatus = when (mCurrentStatus) {
                        LoadStatus.MID_LOADING -> LoadStatus.FIRST_LOADING
                        LoadStatus.FIRST_LOADING -> LoadStatus.SECOND_LOADING
                        LoadStatus.SECOND_LOADING -> LoadStatus.THIRD_LOADING
                        LoadStatus.THIRD_LOADING -> {
                            reverseTriangleStart()
                            LoadStatus.LOADING_COMPLETE
                        }
                        //reverseTriangleStart()
                        LoadStatus.LOADING_COMPLETE -> LoadStatus.THIRD_DISMISS
                        LoadStatus.THIRD_DISMISS -> LoadStatus.FIRST_DISMISS
                        LoadStatus.FIRST_DISMISS -> LoadStatus.SECOND_DISMISS
                        LoadStatus.SECOND_DISMISS -> LoadStatus.MID_DISMISS
                        LoadStatus.MID_DISMISS -> {
                            reverseTriangleStart()
                            LoadStatus.MID_LOADING
                        }
                    }
                }

3、动态变化

 mValueAnimator.addUpdateListener {
            var data = it.animatedFraction
            if (mCurrentStatus.ordinal > 3) {
                data = 1 - data
            }
if (mCurrentStatus != LoadStatus.LOADING_COMPLETE) {
                mTriangles[mCurrentStatus.ordinal % 4]?.run {
                    currentP1 = getCurrentPoint(data, startP, endP1)
                    currentP2 = getCurrentPoint(data, startP, endP2)
                }
                invalidate()
            }


        }

注意红色部分，必须要把枚举状态的顺序固定才能这么写，不然顺序执行有问题。

4、绘制

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        canvas ?: return
        mTriangles.forEach {
            mPath.reset()
            mPath.moveTo(it.startP.x, it.startP.y)
            mPath.lineTo(it.currentP1!!.x, it.currentP1!!.y)
            mPath.lineTo(it.currentP2!!.x, it.currentP2!!.y)
            mPath.close()
            mPaint.color = it.color
            canvas.drawPath(mPath, mPaint)
            if (mCurrentStatus == LoadStatus.MID_LOADING) {
                return
            }
        }
    }

其实只要熟悉绘制一个三角形的方法，多个只是数学计算和逻辑上的一些控制，难度不大。

主要在中间遇到几个问题：

1、onAnimationRepeat 在重新绘制的时候会调用2次。

主要原因：执行动画在onLayout方法，会导致出现此情况。修改方式：等待显示后在执行动画，正常。(具体原因其实也不清楚，猜测在View绘制的时候就去执行动画，可能会引起绘制的错误)

（后续在研究view的绘制过程中发现，view的onMeasure onLayout至少会执行两次导致）

2、绘制三角形不是完整的，一个三角形可能还看不出，多个时候就比较明显。

主要原因：动画得到data是（0,1）之间的数，导致计算的当前点不等于最终点

解决方法：没找到valueAnimator可用的方法，就在onAnimationRepeat 中把当前点设置成结束点重新绘制一遍。