前言
在 仿微信錄制短視頻 庫中有一個自定義的View，就是錄制視頻時的進(jìn)度條。其實現(xiàn)的原理很簡單芬探。
progress.gif
實現(xiàn)思路
可以假設(shè)進(jìn)度條是一段距離（s），甲從左邊出發(fā)厘惦，乙右邊出發(fā)偷仿，以相同的速度（v）跑向中點。如圖：
WechatIMG23.jpeg
那只需計算出甲或者乙每秒行走的距離宵蕉，重新繪制進(jìn)度條即可酝静。
核心代碼
@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){ //如果時間 大于 設(shè)置的最少時間 改變進(jìn)度的顏色
mPaint.setColor(progressColor);
}
float dist = mSpeed * druTime; // s= v * t 甲 在druTime 行走的距離
if(dist < measuredWidth/2.0f){ //判斷是否到達(dá)終點
canvas.drawRect(dist,0.0f,measuredWidth - dist,getMeasuredHeight(),mPaint);//繪制進(jìn)度條
invalidate();//重繪
}
}else{
return;
}
canvas.drawRect(0.0f, 0.0f, 0.0f, getMeasuredHeight(), mPaint);
}
drawRect 參數(shù)的理解
官方文檔定義
drawRect(float left, float top, float right, float bottom, Paint paint)
通過一張圖來了解drawRect的參數(shù)
drawRect
然后我們在看看上述代碼：
canvas.drawRect(dist,0.0f,measuredWidth - dist,getMeasuredHeight(),mPaint);//繪制進(jìn)度條
可以看到 top ，和 bottom 不變羡玛。
left：dist 隨著時間的增加 而 增加 别智。
rigth：（measuredWidth - dist）隨著 dist 的增加而減少。
從而 達(dá)到了上面演示的效果稼稿。
Demo ：Github
END.
