仿支付宝加载中，加载成功、失败的动画效果
2017-06-22 本文已影响484人
才兄说
参考：
PathMeasure之迷径追踪
Android Path 解析
代码：
public class StatusActivity extends Activity implements View.OnClickListener {
private CustomStatusView customStatusView;
private Button btn_init;
private Button btnSuccess;
private Button btnFailure;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_status);
customStatusView = (CustomStatusView) findViewById(R.id.as_status);
btn_init = (Button) findViewById(R.id.btn_init);
btnSuccess = (Button) findViewById(R.id.btn_success);
btnFailure = (Button) findViewById(R.id.btn_failure);
customStatusView.loadLoading();
btnSuccess.setOnClickListener(this);
btnFailure.setOnClickListener(this);
btn_init.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_success:
customStatusView.loadSuccess();
break;
case R.id.btn_failure:
customStatusView.loadFailure();
break;
case R.id.btn_init:
customStatusView.loadLoading();
break;
}
}
}
xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.share.jack.customviewpath.widget.CustomStatusView
android:id="@+id/as_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="3dp"
app:loading_color="#0000ff"
app:load_success_color="#00ff00"
app:load_failure_color="#ff0000"
app:progress_radius="20dp"
app:progress_width="3dp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="50dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_init"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="加载中" />
<Button
android:id="@+id/btn_success"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="成功" />
<Button
android:id="@+id/btn_failure"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="失败" />
</LinearLayout>
</LinearLayout>
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomStatusView">
<attr name="progress_width" format="dimension" />
<attr name="progress_radius" format="dimension" />
<attr name="loading_color" format="color" />
<attr name="load_success_color" format="color" />
<attr name="load_failure_color" format="color" />
</declare-styleable>
</resources>
自定义view：
public class CustomStatusView extends View {
private int loadingColor; //进度颜色
private int loadSuccessColor; //成功的颜色
private int loadFailureColor; //失败的颜色
private float progressWidth; //进度宽度
private float progressRadius; //圆环半径
private Paint mPaint;
private StatusEnum mStatus; //状态
private int startAngle = -90;//开始角度
private int minAngle = -90;//最小角度
private int sweepAngle = 120;//扫描角度
private int curAngle = 0;//当前角度
//追踪Path的坐标
private PathMeasure mPathMeasure;
//画圆的Path
private Path mPathCircle;
//截取PathMeasure中的path
private Path mPathCircleDst;
private Path successPath;
private Path failurePathLeft;
private Path failurePathRight;
private ValueAnimator circleAnimator;
private float circleValue;
private float successValue;
private float failValueRight;
private float failValueLeft;
public CustomStatusView(Context context) {
this(context, null);
}
public CustomStatusView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomStatusView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomStatusView, defStyleAttr, 0);
loadingColor = array.getColor(R.styleable.CustomStatusView_loading_color, ContextCompat.getColor(context, R.color.colorPrimary));
loadSuccessColor = array.getColor(R.styleable.CustomStatusView_load_success_color, ContextCompat.getColor(context, R.color.load_success));
loadFailureColor = array.getColor(R.styleable.CustomStatusView_load_failure_color, ContextCompat.getColor(context, R.color.load_failure));
progressWidth = array.getDimension(R.styleable.CustomStatusView_progress_width, 6);//3
progressRadius = array.getDimension(R.styleable.CustomStatusView_progress_radius, 100);//40
array.recycle();
init();
}
private void init() {
initPaint();
initPath();
initAnim();
}
private void initPaint() {
mPaint = new Paint();
mPaint.setColor(loadingColor);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setDither(true);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(progressWidth);
mPaint.setStrokeCap(Paint.Cap.ROUND); //设置画笔为圆角笔触
}
private void initPath() {
mPathCircle = new Path();
mPathMeasure = new PathMeasure();
mPathCircleDst = new Path();
successPath = new Path();
failurePathLeft = new Path();
failurePathRight = new Path();
}
private void initAnim() {
circleAnimator = ValueAnimator.ofFloat(0, 1);
circleAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
circleValue = (float) animation.getAnimatedValue();
invalidate();
}
});
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width;
int height;
int mode = MeasureSpec.getMode(widthMeasureSpec);
int size = MeasureSpec.getSize(widthMeasureSpec);
if (mode == MeasureSpec.EXACTLY) {
width = size;
} else {
//直径
width = (int) (2 * progressRadius + progressWidth + getPaddingLeft() + getPaddingRight());
}
mode = MeasureSpec.getMode(heightMeasureSpec);
size = MeasureSpec.getSize(heightMeasureSpec);
if (mode == MeasureSpec.EXACTLY) {
height = size;
} else {
height = (int) (2 * progressRadius + progressWidth + getPaddingTop() + getPaddingBottom());
}
setMeasuredDimension(width, height);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//将当前画布的点移到getPaddingLeft,getPaddingTop,后面的操作都以该点作为参照点
canvas.translate(getPaddingLeft(), getPaddingTop());
if (mStatus == StatusEnum.Loading) {//正在加载
mPaint.setColor(loadingColor);
if (startAngle == minAngle) {
sweepAngle += 6;
}
if (sweepAngle >= 300 || startAngle > minAngle) {
startAngle += 6;
if (sweepAngle > 20) {//保持结束位置不变
sweepAngle -= 6;
}
}
if (startAngle > minAngle + 300) {
//startAngle = startAngle % 360;
//216%360=216
startAngle %= 360;
minAngle = startAngle;
sweepAngle = 20;
}
canvas.rotate(curAngle += 4, progressRadius, progressRadius); //旋转的弧长为4
canvas.drawArc(new RectF(0, 0, progressRadius * 2, progressRadius * 2), startAngle, sweepAngle, false, mPaint);
invalidate();
} else if (mStatus == StatusEnum.LoadSuccess) {//加载成功
mPaint.setColor(loadSuccessColor);
mPathCircle.addCircle(getWidth() / 2-9, getWidth() / 2-9, progressRadius, Path.Direction.CW);//Path.Direction.CW 顺时针
mPathMeasure.setPath(mPathCircle, false);
mPathMeasure.getSegment(0, circleValue * mPathMeasure.getLength(), mPathCircleDst, true);//截取path并保存到mPathCircleDst中
canvas.drawPath(mPathCircleDst, mPaint);//mPathCircleDst是一段长度变化的path
if (circleValue == 1) {//表示圆画完了,可以钩了
successPath.moveTo(getWidth() / 8 * 3-9, getWidth() / 2-9);
successPath.lineTo(getWidth() / 2-9, getWidth() / 5 * 3-9);
successPath.lineTo(getWidth() / 3 * 2-9, getWidth() / 5 * 2-9);
mPathMeasure.nextContour();//下一个path
mPathMeasure.setPath(successPath, false);
mPathMeasure.getSegment(0, successValue * mPathMeasure.getLength(), mPathCircleDst, true);
canvas.drawPath(mPathCircleDst, mPaint);
}
} else {//加载失败
mPaint.setColor(loadFailureColor);
mPathCircle.addCircle(getWidth() / 2-9, getWidth() / 2-9, progressRadius, Path.Direction.CW);
mPathMeasure.setPath(mPathCircle, false);
mPathMeasure.getSegment(0, circleValue * mPathMeasure.getLength(), mPathCircleDst, true);
canvas.drawPath(mPathCircleDst, mPaint);
if (circleValue == 1) { //表示圆画完了,可以画叉叉的右边部分
failurePathRight.moveTo(getWidth() / 3 * 2-9, getWidth() / 3-9);
failurePathRight.lineTo(getWidth() / 3-9, getWidth() / 3 * 2-9);
mPathMeasure.nextContour();
mPathMeasure.setPath(failurePathRight, false);
mPathMeasure.getSegment(0, failValueRight * mPathMeasure.getLength(), mPathCircleDst, true);
canvas.drawPath(mPathCircleDst, mPaint);
}
if (failValueRight == 1) { //表示叉叉的右边部分画完了,可以画叉叉的左边部分
failurePathLeft.moveTo(getWidth() / 3-9, getWidth() / 3-9);
failurePathLeft.lineTo(getWidth() / 3 * 2-9, getWidth() / 3 * 2-9);
mPathMeasure.nextContour();
mPathMeasure.setPath(failurePathLeft, false);
mPathMeasure.getSegment(0, failValueLeft * mPathMeasure.getLength(), mPathCircleDst, true);
canvas.drawPath(mPathCircleDst, mPaint);
}
}
}
private void setStatus(StatusEnum status) {
mStatus = status;
}
private void clearState() {
startAngle = -90;
minAngle = -90;
sweepAngle = 120;
curAngle = 0;
circleValue = 0;
successValue = 0;
failValueRight = 0;
failValueLeft = 0;
initPath();
}
/**
* 加载中状态
*/
public void loadLoading() {
clearState();
setStatus(StatusEnum.Loading);
invalidate();
}
/**
* 加载成功
*/
public void loadSuccess() {
setStatus(StatusEnum.LoadSuccess);
startSuccessAnim();
}
/**
* 加载失败
*/
public void loadFailure() {
setStatus(StatusEnum.LoadFailure);
startFailAnim();
}
private void startSuccessAnim() {
ValueAnimator success = ValueAnimator.ofFloat(0f, 1.0f);
success.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
successValue = (float) animation.getAnimatedValue();
invalidate();
}
});
//组合动画,一先一后执行
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(success).after(circleAnimator);
animatorSet.setDuration(500);
animatorSet.start();
}
private void startFailAnim() {
ValueAnimator failLeft = ValueAnimator.ofFloat(0f, 1.0f);
failLeft.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
failValueRight = (float) animation.getAnimatedValue();
invalidate();
}
});
ValueAnimator failRight = ValueAnimator.ofFloat(0f, 1.0f);
failRight.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
failValueLeft = (float) animation.getAnimatedValue();
invalidate();
}
});
//组合动画,一先一后执行
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(failLeft).after(circleAnimator).before(failRight);
animatorSet.setDuration(500);
animatorSet.start();
}
}
