动画学习之Music图形绘制

今天来实现一个类似于网易云音乐类似的动态效果，在用网易云音乐听歌时会有一个类似这样的效果，如下：

而咱们这次要实现的效果如下：

music图形的绘制：

在实现动画之前先来将静态的图形绘制出来， 如下：

首先绘制两个圆，如下：

所以新建一个自定义View，如下：

/**
 * 音乐加载View
 * 首先绘制静态图形
 */
public class MusicLoadingView extends View {

    //variables
    private Paint paint;

    public MusicLoadingView(Context context) {
        this(context, null);
    }

    public MusicLoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public MusicLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //1、首先绘制两个圆（大圆和小圆）
        //2、绘制两段对称的弧
    }
}

而绘制圆需要确定圆心和半径，而这两个值的确定需要先知道圆的直径，而这里的直径取咱们自定义View的宽高的最小值，如下：

有了这个直径之后，接下来先绘制大圆了，如下：

此时编译运行：

呃~~不是空心的，那简单，更改画笔的样式既可：

再次运行：

接下来再来绘制中心的小圆，很显然需要给这个小圆定义一下它的半径，所以：

编译运行：

嗯~~但是对比最终效果发现这个小圆的线太细了，那就加粗呗，如下：

编译运行：

但是！！！大圆太贴边了，都有点被切的感觉，如下：

所以应该将其与View的边界有一定间隔，很简单，将大圆的半径缩小一点既可，如下：

大小圆目前已经绘制好了，接下来则需要要圆上绘制两段弧，如下：

关于如何绘制弧通过之前的练习已经非常熟悉了，这里就不过多解释，只是需要说明的一点，上面两段对立的弧其角度相差180度，很容易理解，所以接下来先绘制一对弧，如下：

/**
 * 音乐加载View
 * 首先绘制静态图形
 */
public class MusicLoadingView extends View {

    //constants
    /* 小圆的半径 */
    private static final float SMALL_RADIUS = 5f;
    private static final float SWEEP_ANGLE = 80f;

    //variables
    private Paint paint;
    /* 大圆的直径:取屏幕宽高的较小值 */
    private int length;

    public MusicLoadingView(Context context) {
        this(context, null);
    }

    public MusicLoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public MusicLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);//设置成空心的样式
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        length = Math.min(w, h);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //1、首先绘制两个圆（大圆和小圆）
        paint.setStrokeWidth(2);
        canvas.drawCircle(length / 2, length / 2, length / 2 - SMALL_RADIUS, paint);//大圆
        paint.setStrokeWidth(5);
        canvas.drawCircle(length / 2, length / 2, SMALL_RADIUS, paint);//小圆

        //2、绘制两段对称的弧
        RectF rectF = new RectF(length / 2 - length / 3, length / 2 - length / 3, length / 2 + length / 3, length / 2 + length / 3);
        canvas.drawArc(rectF, 0, SWEEP_ANGLE, false, paint);//第一段弧
        canvas.drawArc(rectF, 180, SWEEP_ANGLE, false, paint);//第一段对称弧
    }
}

其外切矩形就是以大圆的直径为参照来定的，这个可以根据实际业务场景动态去决定，下面编译运行一下：

嗯~~弧正常被设置了，不过貌似太粗了，原因是由于它是在绘制小圆之后进行绘制的，而小圆更改了画笔的粗度，要改细咱们可以将下面代码进行对换一下：

此时再次编译运行：

接下来再来绘制另外一对弧那就依葫芦画瓢呗，只是说弧度比刚才的要小一点，直接上代码：

编译运行：

至此~~静态效果就已经实现啦，接下来则想办法让其动起来。

music图形动画实现:

此次的动画实现还是跟上一次WIFI【http://www.cnblogs.com/webor2006/p/8322387.html】的实现思路类似，纯代码来控制而不采用Android提供的动画，在上一次中是采用Handler的方式来按一定的时间不断去调用invalidate()来达到不断绘制的目的，如：

对于这一次的实现思路基本类似，但是这次不采用handler了，而是直接在onDraw()方法中不断调用invalidate()方法，因为这次的动画本身要求就是不断绘制不需要加延时，所以：

而最终效果关键之所在在于两对弧不断的在“运动”，而弧的具体位置的改变也就是在绘制弧形时的startAngle来决定，所以咱们需要将弧的开始角度提成变量，以便在onDraw()方法中不断去更改起始角度来达到"运动"的目的，所以：

/**
 * 音乐加载View
 * 首先绘制静态图形
 */
public class MusicLoadingView extends View {

    //constants
    /* 小圆的半径 */
    private static final float SMALL_RADIUS = 5f;
    private static final float SWEEP_ANGLE = 80f;

    //variables
    private Paint paint;
    /* 大圆的直径:取屏幕宽高的较小值 */
    private int length;
    /* 第一条弧的起始角度 */
    private float startAngle1 = 0;
    /* 第二条对称弧的起始角度 */
    private float startAngle2 = 180;

    public MusicLoadingView(Context context) {
        this(context, null);
    }

    public MusicLoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public MusicLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);//设置成空心的样式
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        length = Math.min(w, h);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //1、首先绘制两个圆（大圆和小圆）
        paint.setStrokeWidth(5);
        canvas.drawCircle(length / 2, length / 2, SMALL_RADIUS, paint);//小圆
        paint.setStrokeWidth(2);
        canvas.drawCircle(length / 2, length / 2, length / 2 - SMALL_RADIUS, paint);//大圆

        //2、绘制两段对称的弧
        RectF rectF = new RectF(length / 2 - length / 3, length / 2 - length / 3, length / 2 + length / 3, length / 2 + length / 3);
        canvas.drawArc(rectF, startAngle1, SWEEP_ANGLE, false, paint);//第一段弧
        canvas.drawArc(rectF, startAngle2, SWEEP_ANGLE, false, paint);//第一段对称弧

        rectF = new RectF(length / 2 - length / 4, length / 2 - length / 4, length / 2 + length / 4, length / 2 + length / 4);
        canvas.drawArc(rectF, startAngle1, SWEEP_ANGLE, false, paint);//第二段弧
        canvas.drawArc(rectF, startAngle2, SWEEP_ANGLE, false, paint);//第二段对称弧

        invalidate();
    }
}

接着每次绘制时不断改变其角度，如下：

此时编译运行就是在开篇所看到的效果了，另外还差一个收尾工作，就是当app退出时的处理，目前onDraw()是不断在重绘，所以需要控制一下生命周期合理释放资源，在上次wifi的资源释放时是采用给View增加一个onDestroy()在Activity退出时主动调一下，而这次不借助Activity了，而是在View中能知道什么时候销毁了，具体做法如下：

/**
 * 音乐加载View
 * 首先绘制静态图形
 */
public class MusicLoadingView extends View {

    //constants
    /* 小圆的半径 */
    private static final float SMALL_RADIUS = 5f;
    private static final float SWEEP_ANGLE = 80f;

    //variables
    private Paint paint;
    /* 大圆的直径:取屏幕宽高的较小值 */
    private int length;
    /* 第一条弧的起始角度 */
    private float startAngle1 = 0;
    /* 第二条对称弧的起始角度 */
    private float startAngle2 = 180;
    /*是否不断绘制，用来控制生命周期*/
    private boolean isLoopDraw = true;

    public MusicLoadingView(Context context) {
        this(context, null);
    }

    public MusicLoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public MusicLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);//设置成空心的样式
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        length = Math.min(w, h);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        startAngle1 += 3;
        startAngle2 += 3;
        //1、首先绘制两个圆（大圆和小圆）
        paint.setStrokeWidth(5);
        canvas.drawCircle(length / 2, length / 2, SMALL_RADIUS, paint);//小圆
        paint.setStrokeWidth(2);
        canvas.drawCircle(length / 2, length / 2, length / 2 - SMALL_RADIUS, paint);//大圆

        //2、绘制两段对称的弧
        RectF rectF = new RectF(length / 2 - length / 3, length / 2 - length / 3, length / 2 + length / 3, length / 2 + length / 3);
        canvas.drawArc(rectF, startAngle1, SWEEP_ANGLE, false, paint);//第一段弧
        canvas.drawArc(rectF, startAngle2, SWEEP_ANGLE, false, paint);//第一段对称弧

        rectF = new RectF(length / 2 - length / 4, length / 2 - length / 4, length / 2 + length / 4, length / 2 + length / 4);
        canvas.drawArc(rectF, startAngle1, SWEEP_ANGLE, false, paint);//第二段弧
        canvas.drawArc(rectF, startAngle2, SWEEP_ANGLE, false, paint);//第二段对称弧

        if (isLoopDraw)
            invalidate();//让View不断重绘
    }

    //当自定义控制脱离窗体，即将销毁的时候会被调用
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        Log.e("cexo", "MusicLoadingView.onDetachedFromWindow()");
        isLoopDraw = false;
    }
}

最后运行在退出时可以看到它被调用了，如下：

至此~效果完美实现！