效果图

github源码 小小记录一下。。
第一种方式实现会卡顿

private Paint arcPaint;
private int arcWidth = 100;
private int width;
private int[] arcs = {0, 130, 100, 70, 30, 30};
private int[] colors = {0x44ff0000, 0x4400ff00, 0x440000ff, 0x440f000f, 0x44000f00};
private int[] beginArray = new int[5];
private int[] endArray = new int[5];
private void init() {
arcPaint = new Paint();
arcPaint.setDither(true);
arcPaint.setAntiAlias(true);
arcPaint.setStyle(Paint.Style.STROKE);
arcPaint.setStrokeWidth(arcWidth);
startArcRange = new ArcRange(0f, 0f);
for (int i = 0; i < arcs.length - 1; i++) {
int beginAngel = 0, sweepAngel;
for (int j = 0; j <= i; j++) {
beginAngel += arcs[j];
}
sweepAngel = arcs[i + 1];
//采用了2个valueAnimator同时启动,不断更新起始点和sweep点,但是只在开始或者sweep点刷新
ValueAnimator valueAnimatorBegin = ValueAnimator.ofInt(0, beginAngel);
ValueAnimator valueAnimatorEnd = ValueAnimator.ofInt(0, sweepAngel);
final int finalI1 = i;
valueAnimatorBegin.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
begin = (int) valueAnimator.getAnimatedValue();
beginArray[finalI1] = begin;
invalidate();
}
});
valueAnimatorEnd.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
end = (int) valueAnimator.getAnimatedValue();
endArray[finalI1] = end;
}
});
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(valueAnimatorBegin, valueAnimatorEnd);
animatorSet.setDuration(2000);
animatorSet.setInterpolator(new DecelerateInterpolator());
animatorSet.start();
}
}
@Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
canvas.translate(width / 2, width / 2);
for (int i = 0; i < arcs.length - 1; i++) {
arcPaint.setColor(colors[i]);
arcRangeList.get(i).getSweep(), false, arcPaint);
canvas.drawArc(new RectF(-width / 2 + arcWidth / 2, -width / 2 + arcWidth / 2,
width / 2 - arcWidth / 2, width / 2 - arcWidth / 2), beginArray[i], endArray[i], false, arcPaint);
}
}
我觉得这种方式造成的卡顿可能是因为起始点和sweep点不同步造成的。。。因此换了ofObject的方式
后记
没有做到很标准很完美,点击和动画效果有所欠缺,时间不是很够,如果后期需要的话可能会一边学习一边完善。
网友评论