首先初始化一些参数
代码语言:javascript
复制 //线的颜色
private int strokeColor;
private Paint mPaint = new Paint();
//扇形圆的中心和要画的角度,圆的半径
private float centerX, centerY, angle, radius;
//记录动画进度
private float radtio;
//下划线长度
private float lineWidth;
public void init() {
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(strokeColor);
mPaint.setStrokeWidth(10);
mPaint.setStrokeCap(Paint.Cap.ROUND);
radius = 50;
angle = 360;
lineWidth = 500;
}
在onDraw方法中做处理,要注意的是,我们要利用画布的旋转来画图形,可以免去很多计算
代码语言:javascript
复制 @Override
protected void onDraw(Canvas canvas) {
centerX = canvas.getWidth() / 3.0f * 2;
centerY = canvas.getHeight() / 3.0f;
canvas.save();
canvas.rotate(45, centerX, centerY);
//画搜索图标的圆,在动画0-0.5内角度变为0,圆心平移radius
if (radtio <= 0.5f) {
RectF rectF = new RectF(centerX - radius radius * radtio * 2, centerY - radius, centerX radius radius * radtio * 2, centerY radius);
canvas.drawArc(rectF, 0, angle * (1 - radtio * 2), false, mPaint);
}
//画搜索图标的线,在动画0-1内长度变为0
Path path = new Path();
path.moveTo(centerX radius radius * radtio * 2, centerY);
path.lineTo(centerX radius * 3, centerY);
canvas.drawPath(path, mPaint);
canvas.save();
canvas.rotate(-45, centerX radius * 3, centerY);
//画搜索图标的下划线
Path bootomPath = new Path();
bootomPath.moveTo(centerX radius * 3, centerY);
bootomPath.lineTo(centerX radius * 3 - lineWidth * radtio, centerY);
canvas.drawPath(bootomPath, mPaint);
canvas.restore();
canvas.restore();
}
项目地址:https://gitee.com/aruba/CanvasApplication.git