圆形展开

效果

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

原理

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

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

代码

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();    }}