Android 自定义 View 模仿 Win10 进度条

这是 JsonChao 的第 279 期分享

先上预览图：

流程

• 1.一个匀速圆周运动的点

• 2.多个匀速圆周运动的点

• 3.多个圆周运动的点，速度由快到慢

• 4.点与点之间的间距线性减少，动画的最后合为一个点

• 5.为了让动画看起来更加流畅，需要在动画即将结束的时候手动绘制点

核心控件

• PathMeasure：截取Path中的一部分并显示

• ValueAnimator：完成动画从初始值平滑的过渡到结束值的效果，同时还负责管理动画的播放次数、播放模式、以及对动画设置监听器等

1一个匀速圆周运动的点

   

1. 先用path画一个圆

2. ValueAnimator设置为0f-1f的平滑

3. 用PathMeasure根据ValueAnimator返回的值截取path上的一个点

private Paint mPaint;
private Path mPath;
private PathMeasure mPathMeasure;
private int mWidth,mHeight;
private ValueAnimator valueAnimator;
//用这个来接受ValueAnimator的返回值，代表整个动画的进度
private float t;

初始化画笔

初始化Path和mPathMeasure 

这里角度不能选360，否则会测量失误，具体原因和android的内部优化有关

• 初始化ValueAnimator

这里的ValueAnimator设置的是一个时长3秒的动画，在这3秒中，ValueAnimator会返回一个由0f-1f平滑的数字 
ValueAnimator.ofFloat(0f,1f).setDuration(3000) 
在这里我们用t来接受返回值，同时刷新视图

t = (float) animation.getAnimatedValue();
invalidate();

 
这里可以看出t的值，有0到1，这里就可以把t理解为我们这个动画的进度

• 开始绘制

• 结果图

2

多个匀速圆周运动的点

   

我们设置让t每间隔0.05就画一个点，总共画4个点，注意这里getSegment()的最后一个要设置为true来保证画出来的是多个点而不是一条线

结果图 

3

速度由快到慢

   

我们先绘制出路程-时间的函数图像 

函数为y = -x*x + 2*x，当x=1时，y=mPathMeasure.getLength(); 
设s = mPathMeasure.getLength(); 
最终我们套用函数:y = -s*x*x+2*s*x; 
这里的Y轴代表的是path的长度，X轴对应时间 
所以把流程二中的y = s*x改成y = -s*x*x+2*s*x即可

结果图 

4

动画的最后合为一个点

   

虽然流程3中点与点的间距已经开始减少，不过这只是因为速度不同间距才改变的，我们的目的是让这些点到最后合并为1个点，也就是说开始的时候每个点的X间距0.05，结束的时候要让他们的X相同 

目前点之间X的间距函数如下： 

我们最后要让当X=1时，他们的Y值相等，而且他们X的间距由0.05线性平滑到0

 
 
看函数图像已经很清楚了，修改后代码如下：

结果图 

5

完美的补刀

   

这里已经完成了99.9%了，但细心的同学会发现，进度条每次转动一圈聚成一个点后都会闪一下，这是因为重新开始动画刷新视图的原因，这里的补救方法就是我们在动画快结束的时候手动画一个点

if(t>=0.95){
    canvas.drawPoint(0,-150,mPaint);
}

这样我们就完成了这个进度条 

END

往期推荐

点击下方卡片关注 JsonChao，为你构建一套

大厂青睐的 T 型人才系统

▲ 点击上方卡片关注 JsonChao，构建一套

大厂青睐的 T 型人才知识体系

欢迎把文章分享到朋友圈

大厂 T 型人才成长社群