我看过上面的动画设计，所以试着实现了。 首先，你会发现这个动画由两个部分组成。 一个圆顺时针旋转，另一个是圆的直线运动，圆之间有时间差。 两个运动重叠时，就会形成这个滚动效果。
图1、图2、图3
上图表示只有圆在旋转的状态，图2表示只有点在直线运动的状态，图3是图2的各点带有时间差的结果。
为了实现描绘点，这里共有15个点，相位偏移为360/15=24
for(intI=0； i POINT_NUM； I ) floatx=mradius*--(float ) math.sin(Degree*24*I )； float y=mRadius * -(float ) math.cos(Degree*24*I )； arcpointpoint=newarcpoint(x，y，COLORS[i % 3] )； mArcPoint[i]=point； } privatefinaldoubledegree=math.pi/180； privatestaticfinalintpoint _ num=15； ArcPoint是包含位置和颜色的点的定义
static class ArcPoint { float x； float y； int color； arcpoint(floatx，float y，int color ) { this.x=x； this.y=y； this.color=color； }绘制圆的旋转可以通过在固定点的情况下旋转“canvas”来实现
@ overrideprotectedvoidondraw (canvas canvas ) ) { canvas.save； canvas.translate(mcenter.x，mCenter.y )； 浮动因子=get factor (； canvas.rotate(36*Factor )； float x，y； for(intI=0； i POINT_NUM； I ) MPa int.setcolor (Marc point [ I ].color )； //floatitemfactor=getitem factor (I，factor )； x=mArcPoint[i].x； //- 2 * mArcPoint[i].x * itemFactor； y=mArcPoint[i].y； //- 2 * mArcPoint[i].y * itemFactor； canvas.Drawcircle(x，y，mPointRadius，mPaint )； } canvas.restore (； 初始动画(if ) { postInvalidate； 这样，就可以得到如图所示圆旋转的动画。 这里固定了旋转角度36。 如果是360的话，可以看到完全的旋转。
这里的旋转角度为什么是36？ 从完整的效果来看，实际上各点平移后，旋转1.5个相位偏移即24*1.5=36，就可以与实际点的图形重叠。 而且，由于点的颜色每三个重复一次，所以经过36度的旋转，新点的位置和动画的开始状态看起来是一样的。
点加上开始偏移时间后，每个点的运动开始时间都不同。 一起运动可以达到图2的效果。 如何从总时间得到每个点的运动时间，也就是说
floatitemfactor=getitem factor (I，factor )； 私有浮置因子(intindex，浮置因子)浮置因子=(factor-0.66 f/point _ num * index ) ) 3； if(itemfactor0f ) { itemFactor=0f； }elseif(itemfactor1f ) { itemFactor=1f； } returnminterpolator.get interpolation (item factor )； }这里设计各点直线运动的时间为周期的1/3，剩下的2/3=0.66为起点到终点开始运动的时间，通过
通过factor - 0.66f/POINT_NUM * index得到各点的开始时间，通过*3换算为直线运动的时间。
结合以上运动可以得到完整的onDraw方法
@ overrideprotectedvoidondraw (canvas canvas ) ) { canvas.save； canvas.translate(mcenter.x，mCenter.y )； 浮动因子=get factor (； canvas.rotate(36*Factor )； float x，y； for(intI=0； i POINT_NUM； I ) MPa int.setcolor (Marc point [ I ].color )； floatitemfactor=getitem factor (I，factor )； x=Marc point [ I ].x-2 * Marc point [ I ].x * item factor； y=Marc point [ I ].y-2 * Marc point [ I ].y * item factor； canvas.Drawcircle(x，y，mPointRadius，mPaint )； } canvas.restore (； 初始动画(if ) { postInvalidate； } } Source code源代码在此https://github.com/fichar du/circle progress