目录

前言

之前做了一个答题的小游戏，有一个倒计时的效果，因此就写了一个，在此记录一下方便以后使用

实现效果

实现原理

1.首先画一个白色的圆作为背景，然后利用Paint的setShadowLayer方法为圆形背景加一个投影，使其更有立体感。

2.利用Canvas的drawArc方法在这个圆的上方画一个圆环，这里需要将Paint的Style设置为Paint.Style.STROKE

3.用Canvas的drawText方法将倒计时的时间画到控件中心位置

4.最后创建一个ValueAnimator用来改变圆弧的长度和倒计时的数字，从而产生动画效果。

代码展示

/**
 * 倒计时控件
 */
class TimeDownView: View {
    private var mPaintRing: Paint = Paint(Paint.ANTI_ALIAS_FLAG) //环形的圆的画笔
    private var mPaintCircle:Paint = Paint(Paint.ANTI_ALIAS_FLAG)//圆形背景的画笔
    private var mPaintTimeText = Paint(Paint.ANTI_ALIAS_FLAG) //时间文字的画笔
    private var mShadowSize  = 10f//阴影大小
    private var mRingWidth = 20f//圆环宽度
    private var mAnimator: ValueAnimator? = null
    private var mRectfRing: RectF? = null //圆环的矩形
    private var mProgress = 10f //进度
    private var mAngle = 90F
    private var mTextBaseY = 0F//文字居中的位置
    var mTimeCountDownCallBack:TimeCountDownCallBack? = null
    constructor(context: Context) : super(context){
        init()
    }
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
    {
        init()
    }
    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr){
        init()
    }
    private fun init(){
        setLayerType(LAYER_TYPE_SOFTWARE,null)//关闭硬件加速
        mPaintCircle.color = Color.WHITE
        mPaintCircle.style = Paint.Style.FILL
        mPaintCircle.setShadowLayer(mShadowSize,0F,0F,Color.BLACK)
        mPaintRing.color = Color.BLUE
        mPaintRing.style = Paint.Style.STROKE
        mPaintRing.strokeWidth = mRingWidth
        mPaintTimeText.color = Color.BLACK
        mPaintTimeText.textAlign = Paint.Align.CENTER
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        mRingWidth = width / 10F
        mPaintTimeText.strokeWidth = mRingWidth
        mPaintTimeText.textSize = (width - mShadowSize - mRingWidth)/2
        val ringMargen = mRingWidth/3*2
        mRectfRing = RectF(ringMargen+mShadowSize,ringMargen+mShadowSize,width-ringMargen-mShadowSize,height-ringMargen-mShadowSize)
        val fontMetrics = mPaintTimeText.fontMetrics
// 计算文字高度 
        val fontHeight = fontMetrics.bottom - fontMetrics.top
// 计算文字baseline 让文字垂直居中
        mTextBaseY = height - (height - fontHeight) / 2 - fontMetrics.bottom
        startAnim()
    }

    /**
     * 开始动画
     */
    fun  startAnim(){
        if(mAnimator!=null){
            mAnimator!!.cancel()
        }
        mAnimator = ValueAnimator.ofFloat(11f, 1f)
        mAnimator!!.duration = 10000L
        //设置动画差值器，让动画为匀速动画
        mAnimator!!.interpolator = LinearInterpolator()
        mAnimator!!.addUpdateListener {
            mProgress = it.animatedValue as Float
            invalidate()
        }
        mAnimator!!.repeatMode = ValueAnimator.RESTART
        mAnimator!!.repeatCount = ValueAnimator.INFINITE
        mAnimator!!.addListener(object : AnimatorListenerAdapter(){
            override fun onAnimationEnd(animation: Animator?) {
                super.onAnimationEnd(animation)
            }
            override fun onAnimationRepeat(animation: Animator?) {
                super.onAnimationRepeat(animation)
                //回调倒计时重复的事件
                if(mTimeCountDownCallBack!=null){
                    mTimeCountDownCallBack!!.onRepeat()
                }
            }
        })
        mAnimator!!.start()
    }

    /**
     * 结束动画
     */
    fun stopAnim(){
        if(mAnimator!=null){
            mAnimator!!.cancel()
        }
    }
    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        mAnimator?.cancel()
    }
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        val centerX:Float = (width / 2).toFloat()
        val centerY:Float = (height / 2).toFloat()
//        画圆形背景
        canvas!!.drawCircle(centerX,centerY,Math.min(centerX,centerY)-mShadowSize,mPaintCircle)
        //画圆环
        canvas.drawArc(mRectfRing!!,0F - mAngle,-36F*(mProgress-1),false,mPaintRing)
        canvas.drawText("${mProgress.toInt()}",centerX,mTextBaseY,mPaintTimeText)
    }

    /**
     * 倒计时结束的时候的回调
     */
    interface TimeCountDownCallBack{
        fun onRepeat()
    }
}