内容简概
一、画线、圆、扇形
二、扇形动画
具体内容
一、画线、圆、扇形、圆弧
（一）创建一个类（继承View）用于测试
在这个类中，我们放置线、圆、扇形、圆弧。
public class TestView extends View {
// 实现View的两个方法
public TestView(Context context) {
super(context);
}
public TestView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
// 画线
// 1. 准备画笔 抗锯齿
Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setTextSize(70);
mPaint.setColor(Color.BLACK); // 设置画笔颜色
mPaint.setStrokeWidth(20); // 设置画笔粗细
// 2.在画布上画线
canvas.drawLine(50,50,300,400,mPaint);
// x,y为开头文字左下角左标
canvas.drawText("↑",200,600,mPaint);
canvas.drawText("drawLine",50,700,mPaint);
//3.画圆
// 这里的top是圆心坐标，
canvas.drawArc(600,50,1000,450,0,300,true,mPaint);
canvas.drawText("↑",770,600,mPaint);
canvas.drawText("drawArc",650,700,mPaint);
// useCenter = false
canvas.drawArc(50,800,450,1200,0,300,false,mPaint);
canvas.drawText("↑",200,1300,mPaint);
canvas.drawText("drawArc",50,1400,mPaint);
canvas.drawText("useCenter=false",50,1500,mPaint);
// 画圆的另一种方法
canvas.drawCircle(800,1000,200,mPaint);
canvas.drawText("↑",770,1300,mPaint);
canvas.drawText("drawCircle",650,1400,mPaint);
}
}
这里的圆是实心的，如果想要画空心的圆或者圆弧怎么办呢？只要多加一句mPaint.setStyle(Paint.Style.STROKE);就可以了，系统默认的style为FILL（实心）。
（二） xml（使用RelativeLayout）
<com.example.test.TestView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
（三）运行结果图
左边为实心，右边为空心。空心就是描绘外轮廓。（请忽略空心的丑陋文字）。
二、扇形动画
扇形动画是扇形的半径不变，转的角度在变。下面我用两个类分别实现两种动画，一种是点击展开的扇形，一种是自动展开的扇形。前者可以用onTouchEvent方法实现，后者可以用Timer（定时器）或属性动画实现。
（一）点击展开的扇形
规定扇形完全展开后就固定为圆形，不再变化。
public class FanAnimation extends View {
int angle; //每次增长之后的值
int speed = 20; //增长速度
public FanAnimation(Context context) {
super(context);
}
public FanAnimation(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}
@Override
protected void onDraw(Canvas canvas) {
drawFanChart(canvas,Color.BLACK, (float) (angle/360.0),"点击展开的扇形");
}
// onDraw方法不能满足需求，所以自己写一个方法
private void drawFanChart(Canvas canvas,int color,float rate,String text){
//画笔
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setTextSize(70);
paint.setColor(color);
//画扇形
int endAngle = (int) (360*rate);// 新绘制的扇形endAngle都在增大
canvas.drawArc(50,100,450,500, 0,endAngle, true,paint);
canvas.drawText(text,550,300,paint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN){
// 点击屏幕 画一点 这里的angle就是上面的rate
angle += speed;
// 控制最大值
if (angle>360){
angle = 360;
}
// 刷新
invalidate();
}
return true;
}
}
（二）自动展开的扇形——Timer
public class AutoFanAnimation extends View {
int angle; //每次增长之后的值
int speed = 5; //增长速度
public AutoFanAnimation(Context context) {
super(context);
}
public AutoFanAnimation(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 创建定时器 每个0.5s 画一次
final Timer t = new Timer();
t.schedule(new TimerTask() {
@Override
public void run() {
angle += speed;
if (angle > 360){
angle = 0; // 重新开始
// t.cancel();// 关闭定时器
}
invalidate(); // 通知系统调用ondraw
postInvalidate(); // 子进程里面
}
},0,100);
}
@Override
protected void onDraw(Canvas canvas) {
drawFanChart(canvas, Color.BLACK, (float) (angle/360.0),"自动展开的扇形");
}
// onDraw方法不能满足需求，所以自己写一个方法
private void drawFanChart(Canvas canvas,int color,float rate,String text){
//画笔
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setTextSize(70);
paint.setColor(color);
//画扇形
int endAngle = (int) (360*rate);
canvas.drawArc(50,0,450,400, 0,endAngle, true,paint);
canvas.drawText(text,550,300,paint);
}
}
（三）自动展开的扇形——valueAnimator属性动画
和自动展开的扇形唯一不同的就是onSizeChanged。
public class ValueAnimator extends View {
int angle; //每次增长之后的值
int speed = 20; //增长速度
public ValueAnimator(Context context) {
super(context);
}
public ValueAnimator(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 创建ValueAnimator对象 设置范围0-360
android.animation.ValueAnimator va = android.animation.ValueAnimator.ofInt(0,360);
va.setDuration(3000); // 动画时间
va.setRepeatCount(android.animation.ValueAnimator.INFINITE);
// 设置监听器 监听值的变化
va.addUpdateListener(new android.animation.ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(android.animation.ValueAnimator valueAnimator) {
// 获取某一刻的值
angle = (int) valueAnimator.getAnimatedValue();
// 刷新
invalidate();
}
});
// 启动
va.start();
}
@Override
protected void onDraw(Canvas canvas) {
drawFanChart(canvas, Color.BLACK, (float) (angle/360.0),"属性动画展开的扇形");
}
private void drawFanChart(Canvas canvas,int color,float rate,String text){
//画笔
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setTextSize(57);
paint.setColor(color);
//画扇形
int endAngle = (int) (360*rate);// 新绘制的扇形endAngle都在增大
canvas.drawArc(50,0,450,400, 0,endAngle, true,paint);
canvas.drawText(text,550,300,paint);
}
}
（四）xml（使用LinearLayout）
<com.example.test.FanAnimation
android:id="@+id/click"
android:layout_width="wrap_content"
android:layout_height="250dp"/>
<com.example.test.AutoFanAnimation
android:layout_width="wrap_content"
android:layout_height="200dp"/>
<com.example.test.ValueAnimator
android:layout_width="wrap_content"
android:layout_height="220dp"/>
（五）运行结果图
