自定义 View 之联想手机 ZUI 系统加载动画

今天药忘吃喽~ 2021-11-02 17:40 211阅读 0赞

> **博主声明：**
> 
> 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 [威威喵][Link 1] 原创，请多支持与指教。
> 
> [本文首发于此][Link 2] [博主][Link 3]：[威威喵][Link 1] [|][Link 4] [博客主页][Link 5]：[https://blog.csdn.net/smile\_running][Link 5]

本次自定义 View 写的是一个仿联想手机 ZUI 系统加载动画的效果，前几天博主收到了 ZUI 11 的更新，发现更新了之后并没有大的改善，反而一直用的 touch 手势被改了，一时间不太习惯，老是滑错了，不得不说这个联想手机系统不怎么样。博主也是第一次买的联想手机，吐槽一下，哈哈。

不过呢，对 ZUI 系统的加载动画产生了兴趣，大家有用过联想手机的可能会注意到，它是三个小球在不停的旋转，并且移动到中心，合为一个。接着又分裂为三个，换了颜色，然后一直循环这样做。表达不清楚，直接来看效果图吧，以下是我的手机中的一段录制视频，随便找了一个蓝牙的搜索功能，在搜索时就会有这三个小球的加载动画，如下：

![2019081716521860.gif][]

看到这个效果呢，首先当然是分析一波了。它是三个球旋转一圈，加上往中心聚合的动画，这两种动画一起执行，然后又开始发散，并且颜色也改变了。

首先呢，我们需要绘制三个小圆，这三个小圆每隔的角度都是一样的，也就是 120°，我们要得到小圆的坐标 x，y 值，就需要知道 c1 圆心与 r 半径，这两个都是我们自己设定的。来看下面这张图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly92dmNhdC5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

P 点就代表小圆的坐标，从上面看，利用三角函数公式，我们很容易就得出 P 点的坐标值。C 点是圆心的坐标，设置为屏幕的中心位置，半径 r 的值，我们给予一个默认的就好了。代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <declare-styleable name="ZUILoadingView">
            <attr name="circle_radius" format="float" />
            <attr name="circle_distance" format="float" />
        </declare-styleable>
    </resources>

三个小圆，我们利用循环来绘制即可。看了一点 kotlin 的语法，感觉学起来挺轻松的，也很容易，这是我第一篇使用 kotlin 来编写的。博主将要在以后的文章中使用 kotlin 了，毕竟要随波逐流，才能飘起来，哈哈。

private fun drawCircles(canvas: Canvas) {
            for (i in 0..2) {
                val diff = mRad * mAngle + mRad * 120f * i
                val circleX: Float = mDefDistance * Math.cos(diff).toFloat();
                val circleY: Float = mDefDistance * Math.sin(diff).toFloat();
                mPaint.color = getColors(mCurColor)[i]
                canvas.drawCircle(circleX, circleY, mDefRadius, mPaint)
            }
            startAnimator()
        }

以上代码没什么难度，我们可以很轻松的绘制三个分布一圈的小圆，它们的间隔是 120 °，这个效果的难点，也就是对三个小圆动画的处理了。

这个效果的动画分为两个部分，第一是：圆旋转并且往中心汇聚，第二是：汇聚后更换颜色，然后向四周旋转并且发散。要做到这个效果，我废了少的功夫。我明白了一个问题，那就是 AnimatorSet 没有重复的方法，而且 ValueAnimator 的同一个实例，我们在添加到 AnimatorSet 里的时候，不能实现动画循环效果。至于什么意思，自己可以去试试，我就不多说明了。直接来看动画的代码吧

private fun startAnimator() {
            // 旋转动画
            if (mRotateAnimator == null) {
                mRotateAnimator = ObjectAnimator.ofFloat(0f, 360f)
                mRotateAnimator?.addUpdateListener { animation: ValueAnimator ->
                    mAngle = animation.getAnimatedValue() as Float
                    postInvalidate()
                }
                mRotateAnimator?.duration = 1000L
            }
            if (mRotateAnimator2 == null) {
                mRotateAnimator2 = ObjectAnimator.ofFloat(360f, 720f)
                mRotateAnimator2?.addUpdateListener { animation: ValueAnimator ->
                    mAngle = animation.getAnimatedValue() as Float
                    postInvalidate()
                }
                mRotateAnimator2?.duration = 1000L
            }
            // 平移动画
            if (mTranslateAnimator == null) {
                mTranslateAnimator = ObjectAnimator.ofFloat(mDefDistance, 0f)
                mTranslateAnimator?.addUpdateListener { animation: ValueAnimator ->
                    mDefDistance = animation.getAnimatedValue() as Float
                }
                mTranslateAnimator?.duration = 1000L
            }
            if (mTranslateAnimator2 == null) {
                mTranslateAnimator2 = ObjectAnimator.ofFloat(0f, mDefDistance)
                mTranslateAnimator2?.addUpdateListener { animation: ValueAnimator ->
                    mDefDistance = animation.getAnimatedValue() as Float
                }
                mTranslateAnimator2?.duration = 1000L
            }
    
            if (mAnimTogether == null) {
                mAnimTogether = AnimatorSet()
                mAnimTogether?.playTogether(mRotateAnimator, mTranslateAnimator)
    
            }
            if (mAnimTogether2 == null) {
                mAnimTogether2 = AnimatorSet()
                mAnimTogether2?.playTogether(mRotateAnimator2, mTranslateAnimator2)
                mAnimTogether2?.addListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationStart(animation: Animator?) {
                        changeColor()
                    }
                })
            }
    
            if (mAnimSequentially == null) {
                mAnimSequentially = AnimatorSet()
                mAnimSequentially?.playSequentially(mAnimTogether, mAnimTogether2)
                mAnimSequentially?.start()
                //动画循环
                mAnimSequentially?.addListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationEnd(animation: Animator?) {
                        mAnimSequentially?.start()
                    }
                })
            }
        }

简单的介绍一下上面的代码，小圆的旋转效果，一圈就是 360 ° 的变化，这个好理解。那么汇聚和发散的动画，它其实变化的就是中心点与小圆圆心的距离，这其实就是我们赋予的半径 R ，也就是下面的一个 circle\_distance 属性。改变这个值，就能实现汇聚和发散的动画效果。

<nd.no.xww.learnkotlin.ZUILoadingView
            android:layout_width="200dp"
            app:circle_radius="10"
            app:circle_distance="40"
            android:layout_height="200dp"
            android:layout_centerInParent="true" />

那么以上就是我们在 activity\_main 中的简单使用，你可以控制小圆的半径，以及和圆心的距离。最后，是我们的完整代码，如下：

package nd.no.xww.learnkotlin
    
    import android.animation.*
    import android.annotation.TargetApi
    import android.content.Context
    import android.content.res.TypedArray
    import android.graphics.Canvas
    import android.graphics.Color
    import android.graphics.Paint
    import android.os.Build
    import android.util.AttributeSet
    import android.view.View
    
    /**
     *@desciption : 联想手机 zui 系统的加载动画
     *@author xww
     *@date 2019/8/16
     *@time 16:10
     * 博主：威威喵
     * 博客：https://blog.csdn.net/smile_Running
     */
    class ZUILoadingView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
        : View(context, attrs, defStyleAttr) {
    
        private var mPaint: Paint = Paint()
        private var mDefRadius: Float = 20f
        private var mDefDistance: Float = 100f
        private val mRad = 2 * Math.PI / 360f;
    
        init {
            val array: TypedArray = context.obtainStyledAttributes(attrs, R.styleable.ZUILoadingView)
            mDefRadius = array.getFloat(R.styleable.ZUILoadingView_circle_radius, mDefRadius)
            mDefDistance = array.getFloat(R.styleable.ZUILoadingView_circle_distance, mDefDistance)
            array.recycle()
    
            mPaint.isDither = true
            mPaint.isAntiAlias = true
        }
    
        override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
            val widthMode = MeasureSpec.getMode(widthMeasureSpec)
            var widthSize = MeasureSpec.getSize(widthMeasureSpec)
            if (widthMode == MeasureSpec.AT_MOST)
                widthSize = 200
            val heigthMode = MeasureSpec.getMode(widthMeasureSpec)
            var heigthSize = MeasureSpec.getSize(widthMeasureSpec)
            if (heigthMode == MeasureSpec.AT_MOST)
                widthSize = 200
    
            if (widthSize != heigthSize) {
                widthSize = Math.min(widthSize, heigthSize)
                heigthSize = widthSize
            }
            setMeasuredDimension(widthSize, heigthSize)
        }
    
        override fun onDraw(canvas: Canvas?) {
            super.onDraw(canvas)
            canvas ?: return
    
            canvas.translate(width / 2f, height / 2f)
            drawCircles(canvas)
        }
    
        private val COLORS_ONE: IntArray = intArrayOf(Color.BLUE, Color.YELLOW, Color.RED)
        private val COLORS_TWO: IntArray = intArrayOf(Color.YELLOW, Color.RED, Color.BLUE)
        private val COLORS_THREE: IntArray = intArrayOf(Color.RED, Color.BLUE, Color.YELLOW)
    
        private var mCurColor: ColorSelected = ColorSelected.BLUE
    
        private enum class ColorSelected {
            BLUE, YELLOW, RED
        }
    
        private fun getColors(colorSelected: ColorSelected): IntArray {
            return when (colorSelected) {
                ColorSelected.BLUE -> COLORS_TWO
                ColorSelected.YELLOW -> COLORS_THREE
                ColorSelected.RED -> COLORS_ONE
                else -> COLORS_ONE
            }
        }
    
        private fun drawCircles(canvas: Canvas) {
            for (i in 0..2) {
                val diff = mRad * mAngle + mRad * 120f * i
                val circleX: Float = mDefDistance * Math.cos(diff).toFloat();
                val circleY: Float = mDefDistance * Math.sin(diff).toFloat();
                mPaint.color = getColors(mCurColor)[i]
                canvas.drawCircle(circleX, circleY, mDefRadius, mPaint)
            }
            startAnimator()
        }
    
        var mAngle: Float = 0f
    
        var mRotateAnimator: ValueAnimator? = null
        var mRotateAnimator2: ValueAnimator? = null
    
        var mTranslateAnimator: ValueAnimator? = null
        var mTranslateAnimator2: ValueAnimator? = null
    
        var mAnimTogether: AnimatorSet? = null
        var mAnimTogether2: AnimatorSet? = null
        var mAnimSequentially: AnimatorSet? = null
    
        @TargetApi(Build.VERSION_CODES.O)
        private fun startAnimator() {
            // 旋转动画
            if (mRotateAnimator == null) {
                mRotateAnimator = ObjectAnimator.ofFloat(0f, 360f)
                mRotateAnimator?.addUpdateListener { animation: ValueAnimator ->
                    mAngle = animation.getAnimatedValue() as Float
                    postInvalidate()
                }
                mRotateAnimator?.duration = 1000L
            }
            if (mRotateAnimator2 == null) {
                mRotateAnimator2 = ObjectAnimator.ofFloat(360f, 720f)
                mRotateAnimator2?.addUpdateListener { animation: ValueAnimator ->
                    mAngle = animation.getAnimatedValue() as Float
                    postInvalidate()
                }
                mRotateAnimator2?.duration = 1000L
            }
            // 平移动画
            if (mTranslateAnimator == null) {
                mTranslateAnimator = ObjectAnimator.ofFloat(mDefDistance, 0f)
                mTranslateAnimator?.addUpdateListener { animation: ValueAnimator ->
                    mDefDistance = animation.getAnimatedValue() as Float
                }
                mTranslateAnimator?.duration = 1000L
            }
            if (mTranslateAnimator2 == null) {
                mTranslateAnimator2 = ObjectAnimator.ofFloat(0f, mDefDistance)
                mTranslateAnimator2?.addUpdateListener { animation: ValueAnimator ->
                    mDefDistance = animation.getAnimatedValue() as Float
                }
                mTranslateAnimator2?.duration = 1000L
            }
    
            if (mAnimTogether == null) {
                mAnimTogether = AnimatorSet()
                mAnimTogether?.playTogether(mRotateAnimator, mTranslateAnimator)
    
            }
            if (mAnimTogether2 == null) {
                mAnimTogether2 = AnimatorSet()
                mAnimTogether2?.playTogether(mRotateAnimator2, mTranslateAnimator2)
                mAnimTogether2?.addListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationStart(animation: Animator?) {
                        changeColor()
                    }
                })
            }
    
            if (mAnimSequentially == null) {
                mAnimSequentially = AnimatorSet()
                mAnimSequentially?.playSequentially(mAnimTogether, mAnimTogether2)
                mAnimSequentially?.start()
                //动画循环
                mAnimSequentially?.addListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationEnd(animation: Animator?) {
                        mAnimSequentially?.start()
                    }
                })
            }
        }
    
        private fun changeColor() {
            if (mCurColor == ColorSelected.BLUE)
                mCurColor = ColorSelected.YELLOW
            else if (mCurColor == ColorSelected.YELLOW)
                mCurColor = ColorSelected.RED
            else if (mCurColor == ColorSelected.RED)
                mCurColor = ColorSelected.BLUE
        }
    
        fun cancle() {
            mAnimSequentially?.cancel()
        }
    }

最后，来看看实现的效果吧

![20190817172226800.gif][]

当然了，你可以去改变大小和距离试试，不过我还是觉得这个效果有一点瑕疵，写的不够好，就这样吧。

[Link 1]: https://me.csdn.net/smile_Running
[Link 2]: https://blog.csdn.net/smile_Running/column/info/27169
[Link 3]: https://blog.csdn.net/smile_Running/column/info/27335
[Link 4]: https://blog.csdn.net/smile_Running/column/info/42011
[Link 5]: https://blog.csdn.net/smile_running
[2019081716521860.gif]: /images/20211102/b8199f8519c44271ab60db2c131acfd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly92dmNhdC5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20211102/be31b4adc7f54c619360f4e2d39f192c.png
[20190817172226800.gif]: /images/20211102/4e692a725f57449096bf1a2e65783322.png