
通过这个自定义view,熟悉一下自定义view动画的处理
分析效果图。自定义view包括最外层的弧+中间的圆+中间的文字
通过onSizeChanged方法得到view的尺寸
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//得到边距
paddingLeft = getPaddingLeft();
paddingRight = getPaddingRight();
paddingTop = getPaddingTop();
paddingBottom = getPaddingBottom();
//保证整个view是正方形
mWidth = Math.max(w,h);
mHeight = Math.max(w,h);
//设置内圆的宽
innerCircleWidth =( mWidth - paddingLeft - paddingRight )/ 2;
//设置外弧的宽
outterArcWidth = (mWidth - paddingTop - paddingBottom )/ 10;
//重新绘制
postInvalidate();
}
绘制内圆
mPaint.setColor(circleColor);
canvas.drawCircle(innerCircleWidth + paddingLeft,innerCircleWidth + paddingTop,innerCircleWidth / 2,mPaint);
绘制文字
mPaint.setColor(textColor);
Paint.FontMetrics fontMetrics=new Paint.FontMetrics();
mPaint.getFontMetrics(fontMetrics);
float offset=(fontMetrics.descent+fontMetrics.ascent)/2;
canvas.drawText(rate + "%",innerCircleWidth + paddingLeft,innerCircleWidth - offset + paddingTop,mPaint);
绘制外弧
mPaint.setColor(arcColor);
mPaint.setStrokeWidth(outterArcWidth);
mPaint.setStyle(Paint.Style.STROKE);
//计算弧的弧度
float sweapAngle = 360 * rate / 100;
RectF rect = new RectF(0 + paddingLeft + outterArcWidth ,0 + paddingTop + outterArcWidth,mWidth - paddingRight - outterArcWidth,mHeight - paddingBottom - outterArcWidth);
canvas.drawArc(rect,-90,sweapAngle,false,mPaint);
绘制已经成功,现在加上动画效果。自定义view暴露一个接口, setRate(float rate),当调用它设置数据时,开始动画。
ValueAnimator valueAnimator = ValueAnimator.ofFloat(old_rate,rate);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
BigDecimal b = new BigDecimal(Float.parseFloat(animation.getAnimatedValue().toString()));
rate = b.setScale(1,BigDecimal.ROUND_HALF_UP).floatValue();
postInvalidate();
}
});
valueAnimator.setDuration((long)(2000 * Math.abs(old_rate - rate) / 100));
valueAnimator.start();
通过valueAnimator监听数据从之前的数据到新的数据的变化,然后通过调用 postInvalidate()重新绘制view,使得产生动画效果。
网友评论