前言
在 仿微信录制短视频 库中有一个自定义的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.
