Android 加载笑脸/哭脸动画
2017-08-31 本文已影响85人
青青河边踩
由于项目要求，需要写一个加载动画，正在加载的时候转圈，加载成功后出现笑脸，加载失败后出现哭脸，于是写了个自定义view,现在贴出来
public class FaceView extends View {
private int status = 0;//0 普通 1成功 2失败
public static final int NORMAL = 0;
public static final int SUCCESS = 1;
public static final int FAILED = 2;
/**
* 画笔对象的引用
*/
private Paint paintArc;
private Paint paintRing;//圆环
private Paint paintEye; //眼睛
private Paint paintMouth;//嘴巴
/**
* 圆环的颜色
*/
private int roundColor;
/**
* 圆环进度的颜色
*/
private int roundProgressColor;
/**
* 圆环的宽度
*/
private float roundWidth;
/**
* 最大进度
*/
private int max;
/**
* 当前进度
*/
private int progress = 0;
private boolean finish = false;
private int eyeRadius = 1;
private long maxTimer = 10;
private int mActionHeartbeat = 1 ;
private CountdownTimerListener mListener;
public FaceView(Context context) {
this(context, null);
}
public FaceView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public FaceView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
paintRing = new Paint();
paintArc = new Paint();
paintEye = new Paint();
paintMouth = new Paint();
TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
com.qeebike.map.R.styleable.FaceView);
//获取自定义属性和默认值
roundColor = mTypedArray.getColor(com.qeebike.map.R.styleable.FaceView_roundColor, Color.RED);
roundProgressColor = mTypedArray.getColor(com.qeebike.map.R.styleable.FaceView_roundProgressColor, Color.GREEN);
roundWidth = mTypedArray.getDimension(com.qeebike.map.R.styleable.FaceView_roundWidth, 5);
max = mTypedArray.getInteger(com.qeebike.map.R.styleable.FaceView_max, 100);
maxTimer = AppBaseConfigManager.getInstance().getmAppBaseConfigInfo().getBaseInfo().getUnlockTimeOut();
mTypedArray.recycle();
}
private void initPaint() {
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 画最外层的大圆环
*/
int centre = getWidth() / 2; //获取圆心的x坐标
int quarter = getWidth() / 4;
int third = getWidth() / 3;
int radius = (int) (centre - roundWidth / 2); //圆环的半径
paintRing.setColor(roundColor); //设置圆环的颜色
paintRing.setStyle(Paint.Style.STROKE); //设置空心
paintRing.setStrokeWidth(roundWidth); //设置圆环的宽度
paintRing.setAntiAlias(true); //消除锯齿
paintArc.setColor(roundColor); //设置圆环的颜色
paintArc.setStyle(Paint.Style.STROKE); //设置空心
paintArc.setStrokeWidth(roundWidth); //设置圆环的宽度
paintArc.setAntiAlias(true); //消除锯齿
paintArc.setStrokeCap(Paint.Cap.ROUND);
if (status == FAILED) {
paintArc.setColor(roundColor); //设置进度的颜色
} else {
paintArc.setColor(roundProgressColor); //设置进度的颜色
}
if (status == FAILED) {
paintEye.setColor(roundColor);
} else {
paintEye.setColor(roundProgressColor);
}
paintEye.setStyle(Paint.Style.FILL);
paintEye.setAntiAlias(true);
if (status == FAILED) {
paintMouth.setColor(roundColor);
} else {
paintMouth.setColor(roundProgressColor);
}
paintMouth.setStyle(Paint.Style.STROKE); //设置空心
paintMouth.setStrokeWidth(roundWidth/2); //设置圆环的宽度
paintMouth.setAntiAlias(true);
paintMouth.setStrokeCap(Paint.Cap.ROUND);
//设置进度是实心还是空心
RectF oval = new RectF(centre - radius, centre - radius, centre
+ radius, centre + radius); //用于定义的圆弧的形状和大小的界限
RectF ovalMouthSuccess = new RectF((float) (centre - radius * 0.75), (float) (centre - radius * 0.70),
(float) (centre + radius * 0.70), (float) (centre + radius * 0.75));
RectF ovalMouthFailed = new RectF(centre - (int)(radius *0.65), (int)(centre+ radius*0.35),
centre + (int)(radius *0.65), getWidth());
int current = 360 * progress / max;
// int current = 270;
if (status == NORMAL) {
if (current >= 270) {
canvas.drawArc(oval, current - 270, 270, false, paintArc);
} else {
canvas.drawArc(oval, 0, current, false, paintArc); //根据进度画圆弧
}
postDelayed(new Runnable() {
@Override
public void run() {
progress++;
postInvalidate();
}
}, 1);
} else if (status == SUCCESS) {
canvas.drawCircle(centre, centre, radius, paintRing); //画出圆环
canvas.drawArc(oval, 0, 360, false, paintArc);
canvas.drawCircle(quarter, third, eyeRadius, paintEye);
canvas.drawCircle(getWidth() - quarter, third, eyeRadius, paintEye);
canvas.drawArc(ovalMouthSuccess, 0, 10 * eyeRadius, false, paintMouth);
if (!finish) {
postDelayed(new Runnable() {
@Override
public void run() {
eyeRadius++;
if (eyeRadius == 18) {
finish = true;
}
postInvalidate();
}
}, 1);
}
} else if (status == FAILED) {
canvas.drawCircle(centre, centre, radius, paintRing); //画出圆环
canvas.drawArc(oval, 0, 360, false, paintArc);
canvas.drawCircle(quarter, third, eyeRadius, paintEye);
canvas.drawCircle(getWidth() - quarter, third, eyeRadius, paintEye);
canvas.drawArc(ovalMouthFailed, -160, (float) (eyeRadius * 7.777777), false, paintMouth);
if (!finish) {
postDelayed(new Runnable() {
@Override
public void run() {
eyeRadius++;
if (eyeRadius == 18) {
finish = true;
}
postInvalidate();
}
}, 1);
}
}
}
public void setStatus(int status1) {
this.status = status1;
if (status1 == SUCCESS) {
postInvalidate();
} else if (status1 == FAILED) {
paintMouth.setColor(roundColor);
paintArc.setColor(roundColor);
paintEye.setColor(roundColor);
}
}
public void reset() {
maxTimer = AppBaseConfigManager.getInstance().getmAppBaseConfigInfo().getBaseInfo().getUnlockTimeOut();
status = NORMAL;
progress = 1000;
eyeRadius = 1;
postInvalidate();
finish = false;
mHandler.sendEmptyMessage(mActionHeartbeat);
}
/**
* 设置进度的最大值
*
* @param max
*/
public synchronized void setMax(int max) {
if (max < 0) {
throw new IllegalArgumentException("max not less than 0");
}
this.max = max;
}
public void setmListener(CountdownTimerListener mListener) {
this.mListener = mListener;
}
public interface CountdownTimerListener{
//倒计时是否到达
public void onTimeArrive(boolean isArrive);
}
private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
if(msg.what == mActionHeartbeat){
maxTimer = maxTimer - 1000;
if (maxTimer > 0) {
mHandler.sendEmptyMessageDelayed(mActionHeartbeat,1000);
}else{
setStatus(FAILED);
if(mListener!=null){
mListener.onTimeArrive(false);
}
}
}
};
};
}
自定义属性
<declare-styleable name="FaceView">
<!--圆环底色-->
<attr name="roundColor" format="color" />
<!--圆环进度色-->
<attr name="roundProgressColor" format="color" />
<!--圆环宽度-->
<attr name="roundWidth" format="dimension"></attr>
<!--最大进度-->
<attr name="max" format="integer"></attr>
</declare-styleable>
使用
1、XML
<***.FaceView
android:id="@id/loading_view"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="center"
app:roundProgressColor="@color/colorPrimary"
app:roundWidth="8dp"
app:roundColor="@color/text_gray_normal"
/>
2、Java
mFaceView= (FaceView) view.findViewById(R.id.loading_view);
//开始动画
mFaceView.reset();
//加载成功
mFaceView.setStatus(FaceView.SUCCESS);
//加载失败
mFaceView.setStatus(FaceView.FAILED);
效果展示（静图展示三种状态的样式，实则是动态动画）
91CA375B-BC75-4DDE-B00C-33636AC94DE5.png
AEEADCC4-C65E-49D2-AC8E-21EE27B0F9DB.png
FA5F30C4-0DDB-434E-8B6F-D857C2698A51.png
