圆形展开

效果

在加载数据时，界面上需要一个进度条提示用户等待。当数据加载完成后，需要隐藏进度条。在隐藏时，可以使用一些效果，比如一个空心圆从中间开始，一点点的扩大，显露出下面的内容。如：

原理

在展示时，其实是画一个空心圆，内圆的半径不断地增大，这样就类似于一个扩散效果。

在画空心圆时，需要不断地调整笔画的宽度，这样就能保证外面一层始终是被遮盖住的。

代码

package com.example.hufeng.demo;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;

public class MyLinearLayout extends View {
private int radius = 90;
private int smallRadius = 15;
private Paint circlePaint;
private Paint spreadPaint;
private static final int STATE_ROTATION = 1;
private static final int STATE_MERGE = 2;
private static final int STATE_SPREAD = 3;
private int mCurrState = STATE_ROTATION;
private int startAngle = 0;
private float tempRadius;
private ValueAnimator rotationAnimator, mergeAnimator;
private int[] mColors = new int[]{Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW, Color.GRAY, Color.BLACK};
private float centerX, centerY,length;

public MyLinearLayout(Context context, AttributeSet set) {
super(context, set);
init();
startRotation();
}

private void init() {
circlePaint = new Paint();
circlePaint.setStyle(Paint.Style.FILL);
circlePaint.setAntiAlias(true);
spreadPaint = new Paint();
spreadPaint.setStyle(Paint.Style.STROKE);//只画边框，这样能保证中间是空白，从而画出同心圆
spreadPaint.setAntiAlias(true);
spreadPaint.setColor(Color.rgb(0xaa, 0x55, 0x88));//与该控件的背影色一样
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
centerX = getWidth() / 2.0f;
centerY = getHeight() / 2.0f;
length = (float)Math.sqrt((getWidth() * getWidth())+(getHeight() * getHeight()))/2;
}

private void startRotation() {
rotationAnimator = ValueAnimator.ofInt(0, 360);
rotationAnimator.setInterpolator(new LinearInterpolator());
rotationAnimator.setDuration(1000);
rotationAnimator.setRepeatCount(ValueAnimator.INFINITE);
rotationAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
startAngle = (Integer) valueAnimator.getAnimatedValue();
invalidate();
}
});
rotationAnimator.start();
}

@Override
protected void onDraw(Canvas canvas) {
switch (mCurrState) {
case STATE_MERGE:
canvas.drawColor(Color.rgb(0xaa, 0x55, 0x88));//重新绘上背影色
drawMerge(canvas);
break;
case STATE_ROTATION:
canvas.drawColor(Color.rgb(0xaa, 0x55, 0x88));
drawRotation(canvas);
break;
case STATE_SPREAD:
drawSpread(canvas);
break;
}

}

private void drawSpread(Canvas canvas) {
// 圆的半径＝内环小圆半径+画笔宽度的一半
canvas.drawCircle(centerX,centerY,tempRadius+spreadPaint.getStrokeWidth()/2,spreadPaint);
}

private void drawMerge(Canvas canvas) {
for (int x = 0; x < mColors.length; x++) {
double rotation = Math.toRadians(x * 60 + startAngle);
circlePaint.setColor(mColors[x]);
double cx = centerX + tempRadius * Math.cos(rotation);//不断缩小半径，这样就显示出内聚效果
double cy = centerY + tempRadius * Math.sin(rotation);
canvas.drawCircle((float) cx, (float) cy, smallRadius, circlePaint);
}
}

private void drawRotation(Canvas canvas) {
for (int x = 0; x < mColors.length; x++) {
double rotation = Math.toRadians(x * 60 + startAngle);
circlePaint.setColor(mColors[x]);
double cx = centerX + radius * Math.cos(rotation);//不断改变角度，呈现出旋转效果
double cy = centerY + radius * Math.sin(rotation);
canvas.drawCircle((float) cx, (float) cy, smallRadius, circlePaint);
}
}

public void stop() {
mCurrState = STATE_MERGE;
rotationAnimator.cancel();
rotationAnimator = null;

mergeAnimator = ValueAnimator.ofFloat(0, radius);
mergeAnimator.setInterpolator(new OvershootInterpolator(6));
mergeAnimator.setDuration(1000);
mergeAnimator.setRepeatCount(0);
mergeAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
tempRadius = (Float) valueAnimator.getAnimatedValue();
invalidate();
}
});
mergeAnimator.reverse();//反向开始，这样在内聚之间会往外扩展一下
mergeAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {

}

@Override
public void onAnimationEnd(Animator animator) {//结束后，开始画同心圆，展示加载出来的界面
startSpread();
}

@Override
public void onAnimationCancel(Animator animator) {

}

@Override
public void onAnimationRepeat(Animator animator) {

}
});
}

private void startSpread() {
mergeAnimator.cancel();
mergeAnimator = null;

mCurrState = STATE_SPREAD;
final ValueAnimator spreadAnimator = ValueAnimator.ofFloat(0,length);//半径由0到length
spreadAnimator.setDuration(1000);
spreadAnimator.setInterpolator(new LinearInterpolator());
spreadAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
tempRadius = (Float)valueAnimator.getAnimatedValue();//内环小圆半径
spreadPaint.setStrokeWidth(length - tempRadius);//设置画笔宽度
invalidate();
}
});
spreadAnimator.start();
}
}