For more examples of custom views, see android Custom View Index

Let’s do a quick sketch, in case you go to the wrong place.


Well, on the whole, except for the reluctance to remove the watermark as A VIP, the rest is quite good.

Let’s start implementing our effect

When we look at this animation, we can think of two things, one is to draw a circle, and one is to draw a radian, and the circle is the gray background under this rotating line, and the radian is this rotating line.

The idea is very clear, drawing a gray circle is easy, no difficulty, not to say, the difficulty is this radian.

This guy, this arc is going around, and it’s changing, so what do we do?

Firstly, the function of plotting radians is given from function:

canvas.drawArc(rect,startAngle,sweepAngle,false,linePaint);Copy the code

I’m using this function here, and there’s more than one function for plotting radians, so let’s just say this one.

The first parameter refers to the range in which the arc is drawn, which is a Rect, which is a square, so we can limit the range. The second parameter is the starting point in which the arc is drawn, which is the Angle from which the arc starts. It should be mentioned here that on Android, the Angle is calculated clockwise. So when startAngle is 90, which is right at the bottom, ok, the third parameter means the Angle that you draw in radians, well, not so hard, and the fourth parameter, which we normally set to false, what does that do? That is, don’t connect the two ends of the arc to the center point, if you set it to true then it’s connected, not the effect we need, and the fifth parameter is the brush.

To change the sweepAngle, change the startAngle and invalidate(); to change the sweepAngle, change the startAngle. The function keeps redrawing to get what we want.

Below we refer to the code directly, specific explanation is not easy to explain, we code farmers, with code speech:

/** * public class RotaryLineextends View {privatefloat center;
private float radius;
private PaintlinePaint;
private PaintcirclePaint;
private int startAngle = -90;//旋转起始角度
    private int sweepAngle =10;//起始旋转的展示弧度
    private RectFrect;
private boolean isAnimate =true; * */ private int margin =20; Private int lineCoarseness =6; Private int startSpeed =6; Private int endSpeed =8; // Set the rotation speed at the beginning of the animation. // Set the rotation speed at the end of the animation, recommend 6-10 private int angleOfRotation =1260; Public RotaryLine(Context Context) {super(Context); linePaint =new Paint(); circlePaint =new Paint(); } public RotaryLine(Context context, AttributeSet attrs) { super(context, attrs); linePaint =new Paint(); circlePaint =new Paint(); } @Override protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); center = getMeasuredWidth() /2; radius = getMeasuredWidth() /2; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); initData(); canvas.drawCircle(radius,radius,radius,circlePaint); canvas.drawArc(rect,startAngle,sweepAngle,false,linePaint);
if (startAngle +sweepAngle
startAngle +=startSpeed;
sweepAngle +=2;
}else {
if (startAngle
startAngle +=endSpeed;
sweepAngle -=endSpeed -2;
}else{ startAngle = -90; sweepAngle =10; }}if(isAnimate) { invalidate(); }} // Reset animation public voidstartAnimate() {
if(! isAnimate) { invalidate(); isAnimate =true;
}
}
public void stopAnimate() {
isAnimate =false;
}
private void initData() {linePaint. SetColor (Color argb (255180180180)); linePaint.setStyle(Paint.Style.STROKE); linePaint.setStrokeWidth(lineCoarseness); CirclePaint. SetColor (Color argb (255245245245)); rect =new RectF(center -radius +margin,center -radius +margin,center +radius -margin,center +radius -margin); }}Copy the code

If you like my article, please click to follow me. The gold mine of Wan Xuandong