当前位置:   article > 正文

如何仿一个抖音极速版领现金的进度条动画?

如何仿一个抖音极速版领现金的进度条动画?

效果演示

20230617_064552_edit.gif

不仅仅是实现效果,要封装,就封装好

看完了演示的效果,你是否在思考,代码应该怎么实现?先不着急写代码,先想想哪些地方是要可以动态配置的。首先第一个,进度条的形状是不是要可以换?然后进度条的背景色和填充的颜色,以及动画的时长是不是也要可以配置?没错,起始位置是不是也要可以换?最好还要让速度可以一会快一会慢对吧,画笔的笔帽是不是还可以选择平的或圆的?带着这些问题,我们再开始写代码。

代码实现

我们写一个自定义View,把可以动态配置的地方想好后,就可以定义自定义属性了。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="DoraProgressView">
        <attr name="dview_progressType">
            <enum name="line" value="0"/>
            <enum name="semicircle" value="1"/>
            <enum name="semicircleReverse" value="2"/>
            <enum name="circle" value="3"/>
            <enum name="circleReverse" value="4"/>
        </attr>
        <attr name="dview_progressOrigin">
            <enum name="left" value="0"/>
            <enum name="top" value="1"/>
            <enum name="right" value="2"/>
            <enum name="bottom" value="3"/>
        </attr>
        <attr format="dimension|reference" name="dview_progressWidth"/>
        <attr format="color|reference" name="dview_progressBgColor"/>
        <attr format="color|reference" name="dview_progressHoverColor"/>
        <attr format="integer" name="dview_animationTime"/>
        <attr name="dview_paintCap">
            <enum name="flat" value="0"/>
            <enum name="round" value="1"/>
        </attr>
    </declare-styleable>
</resources>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

然后我们不管三七二十一,先把自定义属性解析出来。

private fun initAttrs(context: Context, attrs: AttributeSet?, defStyleAttr: Int) {
    val a = context.obtainStyledAttributes(
        attrs,
        R.styleable.DoraProgressView,
        defStyleAttr,
        0
    )
    when (a.getInt(R.styleable.DoraProgressView_dview_progressType, PROGRESS_TYPE_LINE)) {
        0 -> progressType = PROGRESS_TYPE_LINE
        1 -> progressType = PROGRESS_TYPE_SEMICIRCLE
        2 -> progressType = PROGRESS_TYPE_SEMICIRCLE_REVERSE
        3 -> progressType = PROGRESS_TYPE_CIRCLE
        4 -> progressType = PROGRESS_TYPE_CIRCLE_REVERSE
    }
    when (a.getInt(R.styleable.DoraProgressView_dview_progressOrigin, PROGRESS_ORIGIN_LEFT)) {
        0 -> progressOrigin = PROGRESS_ORIGIN_LEFT
        1 -> progressOrigin = PROGRESS_ORIGIN_TOP
        2 -> progressOrigin = PROGRESS_ORIGIN_RIGHT
        3 -> progressOrigin = PROGRESS_ORIGIN_BOTTOM
    }
    when(a.getInt(R.styleable.DoraProgressView_dview_paintCap, 0)) {
        0 -> paintCap = Paint.Cap.SQUARE
        1 -> paintCap = Paint.Cap.ROUND
    }
    progressWidth = a.getDimension(R.styleable.DoraProgressView_dview_progressWidth, 30f)
    progressBgColor =
        a.getColor(R.styleable.DoraProgressView_dview_progressBgColor, Color.GRAY)
    progressHoverColor =
        a.getColor(R.styleable.DoraProgressView_dview_progressHoverColor, Color.BLUE)
    animationTime = a.getInt(R.styleable.DoraProgressView_dview_animationTime, 1000)
    a.recycle()
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

解析完自定义属性,切勿忘了释放TypedArray。接下来我们考虑下一步,测量。半圆是不是不要那么大的画板对吧,我们在测量的时候就要充分考虑进去。

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    progressBgPaint.strokeWidth = progressWidth
    progressHoverPaint.strokeWidth = progressWidth
    if (progressType == PROGRESS_TYPE_LINE) {
        // 线
        var left = 0f
        var top = 0f
        var right = measuredWidth.toFloat()
        var bottom = measuredHeight.toFloat()
        val isHorizontal = when(progressOrigin) {
            PROGRESS_ORIGIN_LEFT, PROGRESS_ORIGIN_RIGHT -> true
            else -> false
        }
        if (isHorizontal) {
            top = (measuredHeight - progressWidth) / 2
            bottom = (measuredHeight + progressWidth) / 2
            progressBgRect[left + progressWidth / 2, top, right - progressWidth / 2] = bottom
        } else {
            left = (measuredWidth - progressWidth) / 2
            right = (measuredWidth + progressWidth) / 2
            progressBgRect[left, top + progressWidth / 2, right] = bottom - progressWidth / 2
        }
    } else if (progressType == PROGRESS_TYPE_CIRCLE || progressType == PROGRESS_TYPE_CIRCLE_REVERSE) {
        // 圆
        var left = 0f
        val top = 0f
        var right = measuredWidth
        var bottom = measuredHeight
        progressBgRect[left + progressWidth / 2, top + progressWidth / 2, right - progressWidth / 2] =
            bottom - progressWidth / 2
    } else {
        // 半圆
        val isHorizontal = when(progressOrigin) {
            PROGRESS_ORIGIN_LEFT, PROGRESS_ORIGIN_RIGHT -> true
            else -> false
        }
        val min = measuredWidth.coerceAtMost(measuredHeight)
        var left = 0f
        var top = 0f
        var right = 0f
        var bottom = 0f
        if (isHorizontal) {
            if (measuredWidth >= min) {
                left = ((measuredWidth - min) / 2).toFloat()
                right = left + min
            }
            if (measuredHeight >= min) {
                bottom = top + min
            }
            progressBgRect[left + progressWidth / 2, top + progressWidth / 2, right - progressWidth / 2] =
                bottom - progressWidth / 2
            setMeasuredDimension(
                MeasureSpec.makeMeasureSpec(
                    (right - left).toInt(),
                    MeasureSpec.EXACTLY
                ),
                MeasureSpec.makeMeasureSpec(
                    (bottom - top + progressWidth).toInt() / 2,
                    MeasureSpec.EXACTLY
                )
            )
        } else {
            if (measuredWidth >= min) {
                right = left + min
            }
            if (measuredHeight >= min) {
                top = ((measuredHeight - min) / 2).toFloat()
                bottom = top + min
            }
            progressBgRect[left + progressWidth / 2, top + progressWidth / 2, right - progressWidth / 2] =
                bottom - progressWidth / 2
            setMeasuredDimension(
                MeasureSpec.makeMeasureSpec(
                    (right - left + progressWidth).toInt() / 2,
                    MeasureSpec.EXACTLY
                ),
                MeasureSpec.makeMeasureSpec(
                    (bottom - top).toInt(),
                    MeasureSpec.EXACTLY
                )
            )
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85

View的onMeasure()方法是不是默认调用了一个

super.onMeasure(widthMeasureSpec, heightMeasureSpec)
  • 1

它最终会调用setMeasuredDimension()方法来确定最终测量的结果吧。如果我们对默认的测量不满意,我们可以自己改,最后也调用setMeasuredDimension()方法把测量结果确认。半圆,如果是水平的情况下,我们的宽度就只要一半,相反如果是垂直的半圆,我们高度就只要一半。最后我们画还是照常画,只不过在最后把画到外面的部分移动到画板上显示出来。接下来就是我们最重要的绘图环节了。

override fun onDraw(canvas: Canvas) {
    if (progressType == PROGRESS_TYPE_LINE) {
        val isHorizontal = when(progressOrigin) {
            PROGRESS_ORIGIN_LEFT, PROGRESS_ORIGIN_RIGHT -> true
            else -> false
        }
        if (isHorizontal) {
            canvas.drawLine(
                progressBgRect.left,
                measuredHeight / 2f,
                progressBgRect.right,
                measuredHeight / 2f,
                progressBgPaint)
        } else {
            canvas.drawLine(measuredWidth / 2f,
                progressBgRect.top,
                                    measuredWidth / 2f,
                progressBgRect.bottom, progressBgPaint)
        }
        if (percentRate > 0) {
            when (progressOrigin) {
                PROGRESS_ORIGIN_LEFT -> {
                    canvas.drawLine(
                        progressBgRect.left,
                        measuredHeight / 2f,
                        (progressBgRect.right) * percentRate,
                        measuredHeight / 2f,
                        progressHoverPaint
                    )
                }
                PROGRESS_ORIGIN_TOP -> {
                    canvas.drawLine(measuredWidth / 2f,
                        progressBgRect.top,
                        measuredWidth / 2f,
                        (progressBgRect.bottom) * percentRate,
                        progressHoverPaint)
                }
                PROGRESS_ORIGIN_RIGHT -> {
                    canvas.drawLine(
                        progressWidth / 2 + (progressBgRect.right) * (1 - percentRate),
                        measuredHeight / 2f,
                        progressBgRect.right,
                        measuredHeight / 2f,
                        progressHoverPaint
                    )
                }
                PROGRESS_ORIGIN_BOTTOM -> {
                    canvas.drawLine(measuredWidth / 2f,
                        progressWidth / 2 + (progressBgRect.bottom) * (1 - percentRate),
                    measuredWidth / 2f,
                        progressBgRect.bottom,
                    progressHoverPaint)
                }
            }
        }
    } else if (progressType == PROGRESS_TYPE_SEMICIRCLE) {
        if (progressOrigin == PROGRESS_ORIGIN_LEFT) {
            // PI ~ 2PI
            canvas.drawArc(progressBgRect, 180f, 180f, false, progressBgPaint)
            canvas.drawArc(
                progressBgRect,
                180f,
                angle.toFloat(),
                false,
                progressHoverPaint
            )
        } else if (progressOrigin == PROGRESS_ORIGIN_TOP) {
            canvas.translate(-progressBgRect.width() / 2, 0f)
            // 3/2PI ~ 2PI, 0 ~ PI/2
            canvas.drawArc(progressBgRect, 270f, 180f, false, progressBgPaint)
            canvas.drawArc(
                progressBgRect,
                270f,
                angle.toFloat(),
                false,
                progressHoverPaint
            )
        } else if (progressOrigin == PROGRESS_ORIGIN_RIGHT) {
            canvas.translate(0f, -progressBgRect.height() / 2)
            // 2PI ~ PI
            canvas.drawArc(progressBgRect, 0f, 180f, false, progressBgPaint)
            canvas.drawArc(
                progressBgRect,
                0f,
                angle.toFloat(),
                false,
                progressHoverPaint
            )
        } else if (progressOrigin == PROGRESS_ORIGIN_BOTTOM) {
            // PI/2 ~ 3/2PI
            canvas.drawArc(progressBgRect, 90f, 180f, false, progressBgPaint)
            canvas.drawArc(
                progressBgRect,
                90f,
                angle.toFloat(),
                false,
                progressHoverPaint
            )
        }
    } else if (progressType == PROGRESS_TYPE_SEMICIRCLE_REVERSE) {
        if (progressOrigin == PROGRESS_ORIGIN_LEFT) {
            canvas.translate(0f, -progressBgRect.height() / 2)
            // PI ~ 2PI
            canvas.drawArc(progressBgRect, 180f, -180f, false, progressBgPaint)
            canvas.drawArc(
                progressBgRect,
                180f,
                -angle.toFloat(),
                false,
                progressHoverPaint
            )
        } else if (progressOrigin == PROGRESS_ORIGIN_TOP) {
            // 3/2PI ~ PI/2
            canvas.drawArc(progressBgRect, 270f, -180f, false, progressBgPaint)
            canvas.drawArc(
                progressBgRect,
                270f,
                -angle.toFloat(),
                false,
                progressHoverPaint
            )
        } else if (progressOrigin == PROGRESS_ORIGIN_RIGHT) {
            // 2PI ~ PI
            canvas.drawArc(progressBgRect, 0f, -180f, false, progressBgPaint)
            canvas.drawArc(
                progressBgRect,
                0f,
                -angle.toFloat(),
                false,
                progressHoverPaint
            )
        } else if (progressOrigin == PROGRESS_ORIGIN_BOTTOM) {
            canvas.translate(-progressBgRect.width() / 2, 0f)
            // PI/2 ~ 2PI, 2PI ~ 3/2PI
            canvas.drawArc(progressBgRect, 90f, -180f, false, progressBgPaint)
            canvas.drawArc(
                progressBgRect,
                90f,
                -angle.toFloat(),
                false,
                progressHoverPaint
            )
        }
    } else if (progressType == PROGRESS_TYPE_CIRCLE) {
        val deltaAngle = if (progressOrigin == PROGRESS_ORIGIN_TOP) {
            90f
        } else if (progressOrigin == PROGRESS_ORIGIN_RIGHT) {
            180f
        } else if (progressOrigin == PROGRESS_ORIGIN_BOTTOM) {
            270f
        } else {
            0f
        }
        canvas.drawArc(progressBgRect, 0f, 360f, false, progressBgPaint)
        canvas.drawArc(
            progressBgRect,
            180f + deltaAngle,
            angle.toFloat(),
            false,
            progressHoverPaint
        )
    } else if (progressType == PROGRESS_TYPE_CIRCLE_REVERSE) {
        val deltaAngle = if (progressOrigin == PROGRESS_ORIGIN_TOP) {
            90f
        } else if (progressOrigin == PROGRESS_ORIGIN_RIGHT) {
            180f
        } else if (progressOrigin == PROGRESS_ORIGIN_BOTTOM) {
            270f
        } else {
            0f
        }
        canvas.drawArc(progressBgRect, 0f, 360f, false, progressBgPaint)
        canvas.drawArc(
            progressBgRect,
            180f + deltaAngle,
            -angle.toFloat(),
            false,
            progressHoverPaint
        )
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181

绘图除了需要Android的基础绘图知识外,还需要一定的数学计算的功底,比如基本的几何图形的点的计算你要清楚。怎么让绘制的角度变化起来呢?这个问题问的好。这个就牵扯出我们动画的一个关键类,TypeEvaluator,这个接口可以让我们只需要指定边界值,就可以根据动画执行的时长,来动态计算出当前的渐变值。

private inner class AnimationEvaluator : TypeEvaluator<Float> {
    override fun evaluate(fraction: Float, startValue: Float, endValue: Float): Float {
        return if (endValue > startValue) {
            startValue + fraction * (endValue - startValue)
        } else {
            startValue - fraction * (startValue - endValue)
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

百分比渐变的固定写法,是不是应该记个笔记,方便以后CP?那么现在我们条件都成熟了,只需要将初始角度的百分比改变一下,我们写一个改变角度百分比的方法。

fun setPercentRate(rate: Float) {
    if (animator == null) {
        animator = ValueAnimator.ofObject(
            AnimationEvaluator(),
            percentRate,
            rate
        )
    }
    animator?.addUpdateListener { animation: ValueAnimator ->
        val value = animation.animatedValue as Float
        angle =
            if (progressType == PROGRESS_TYPE_CIRCLE || progressType == PROGRESS_TYPE_CIRCLE_REVERSE) {
                (value * 360).toInt()
            } else if (progressType == PROGRESS_TYPE_SEMICIRCLE || progressType == PROGRESS_TYPE_SEMICIRCLE_REVERSE) {
                (value * 180).toInt()
            } else {
                0   // 线不需要求角度
            }
        percentRate = value
        invalidate()
    }
    animator?.interpolator = LinearInterpolator()
    animator?.setDuration(animationTime.toLong())?.start()
    animator?.addListener(object : Animator.AnimatorListener {
        override fun onAnimationStart(animation: Animator) {}
        override fun onAnimationEnd(animation: Animator) {
            percentRate = rate
            listener?.onComplete()
        }

        override fun onAnimationCancel(animation: Animator) {}
        override fun onAnimationRepeat(animation: Animator) {}
    })
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

这里牵扯到了Animator。有start就一定不要忘了异常中断的情况,我们可以写一个reset的方法来中断动画执行,恢复到初始状态。

fun reset() {
    percentRate = 0f
    animator?.cancel()
}
  • 1
  • 2
  • 3
  • 4

如果你不reset,想连续执行动画,则两次调用的时间间隔一定要大于动画时长,否则就应该先取消动画。

涉及到的Android绘图知识点

我们归纳一下完成这个自定义View需要具备的知识点。

  1. 基本图形的绘制,这里主要是扇形
  2. 测量和画板的平移变换
  3. 自定义属性的定义和解析
  4. Animator和动画估值器TypeEvaluator的使用

思路和灵感来自于系统化的基础知识

这个控件其实并不难,主要就是动态配置一些参数,然后在计算上稍微复杂一些,需要一些数学的功底。那么你为什么没有思路呢?你没有思路最可能的原因主要有以下几个可能。

  1. 自定义View的基础绘图API不熟悉
  2. 动画估值器使用不熟悉
  3. 对自定义View的基本流程不熟悉
  4. 看的自定义View的源码不够多
  5. 自定义View基础知识没有系统学习,导致是一些零零碎碎的知识片段
  6. 数学功底不扎实

我觉得往往不是你不会,这些基础知识点你可能都看到过很多次,但是一到自己写就没有思路了。思路和灵感来自于大量源码的阅读和大量的实践。大前提就是你得先把自定义View的这些知识点系统学习一下,先保证都见过,然后才是将它们融会贯通,用的时候信手拈来。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/683464
推荐阅读
相关标签
  

闽ICP备14008679号