前言

在 仿微信录制短视频 库中有一个自定义的View，就是录制视频时的进度条。其实现的原理很简单。

progress.gif

实现思路

可以假设进度条是一段距离（s），甲从左边出发，乙右边出发，以相同的速度（v）跑向中点。如图：

WechatIMG23.jpeg

那只需计算出甲或者乙每秒行走的距离，重新绘制进度条即可。

核心代码

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        long currTime = System.currentTimeMillis();

        if(mState == State.START){
            int measuredWidth = getMeasuredWidth();

            float mSpeed = measuredWidth / 2.0f / maxTime; //速度   = 甲的距离 ／ 总时间

            float druTime = (currTime - startTime);   // 时间

            if(druTime >= minTime){ //如果时间 大于 设置的最少时间 改变进度的颜色
                mPaint.setColor(progressColor);
            }


            float dist = mSpeed * druTime; // s= v * t 甲 在druTime 行走的距离

            if(dist < measuredWidth/2.0f){  //判断是否到达终点

                canvas.drawRect(dist,0.0f,measuredWidth - dist,getMeasuredHeight(),mPaint);//绘制进度条
                invalidate();//重绘

            }
        }else{
            return;
        }
        canvas.drawRect(0.0f, 0.0f, 0.0f, getMeasuredHeight(), mPaint);
    }
   
     

drawRect 参数的理解

官方文档定义

drawRect(float left, float top, float right, float bottom, Paint paint)

通过一张图来了解drawRect的参数

drawRect

然后我们在看看上述代码：

 canvas.drawRect(dist,0.0f,measuredWidth - dist,getMeasuredHeight(),mPaint);//绘制进度条

可以看到 top ，和 bottom 不变。

left：dist 随着时间的增加 而 增加 。
rigth：（measuredWidth - dist）随着 dist 的增加而减少。

从而 达到了上面演示的效果。

Demo ：Github

END.