前言

之前学习canvas画图的时候，写了一个Android的加载动画，代码托管在github上面。

这里是github的地址：github地址，欢迎star，欢迎关注

下面先附上实际运行的效果图。

主要的工作思路

需要绘制这样的动画，首先要学习Canvas的一些基本知识，这里我就不一一介绍了，推荐一个大神的教程，讲解的非常好。

这里是连接：Canvas学习连接

这里要说一下，在没有现成的View，需要自己实现的时候，就使用自定义View，一般继承自View，SurfaceView或其他的View，不包含子View。一般的情况下，我们要下面几个函数，构造函数，测量View大小(onMeasure)，确定View大小(onSizeChanged)，确定子View布局位置(onLayout)，绘制内容(onDraw)，最后在对外提供操作方法和监听回调。

这个loading主要分为下面几个部分：

1、精度框的绘制，随着进度的增加，内部的进度需要，向前填充。

但是，要注意，在左边的部分是分为，上半弧，矩形，下半弧，组成，中间就是一个矩形，在右边同理，有上半弧，矩形，下半弧。下面详细分析的图。

下面是绘制左边的的代码

private void drawLeft(Canvas canvas,int mCurrentProgressPosition) {
        initPaint();
        mPaint.setColor(BLUE_COLOR);
        mPaint.setStyle(Paint.Style.FILL);
        int height = (int) Math.sqrt(900-(30-mCurrentProgressPosition)*(30-mCurrentProgressPosition));
        //上圆弧
        RectF rectUP = new RectF();
        rectUP.left = 200;
        rectUP.top = mTotalHeight/2 + 135 - height;
        rectUP.right = 2 * mCurrentProgressPosition + 200;
        rectUP.bottom = mTotalHeight/2 + 125 + height;
        canvas.drawArc(rectUP, 180, 90, true, mPaint);
        //中部
        RectF mRect = new RectF();
        mRect.left = 200;
        mRect.top = mTotalHeight/2 + 130;
        mRect.right = mCurrentProgressPosition + 200;
        mRect.bottom = mTotalHeight/2 + 170;
        canvas.drawRect(mRect, mPaint);
        //下圆弧
        RectF rectDown = new RectF();
        rectDown.left = 200;
        rectDown.top = mTotalHeight/2 + 175 - height;
        rectDown.right = 2 * mCurrentProgressPosition + 200;
        rectDown.bottom = mTotalHeight/2 + 165 + height;
        canvas.drawArc(rectDown, 90, 90, true, mPaint);
    }

2、云彩的动态效果

详细见代码

3、烟圈的动态效果

主要绘制一个椭圆，然后随着进度的增加，椭圆向上运动，同时要渐渐地变大。

4、房子的波浪显示效果，这里要考虑到试用Path()路径绘图，贝塞尔曲线的绘制。

首先，绘制房子，然后，通过Path()路径，绘制贝叶斯曲线，渐进波浪显示房子的整体效果。

/**
     * 波浪显示
     * @param canvas
     * @param width    波浪的宽度
     * @param length   波浪的高度
     * @param left     波浪的左起点
     * @param top      波浪的上顶点
     */
    private void setPath(Canvas canvas,int width,int length,int left,int top){
        Path path = new Path();
        path.reset();
        int x,y;
        int a = 12;//振幅
        for (int i = mProgress; i < width + mProgress ; i++) {
            x = left + i- mProgress;
            y = (int) (a * Math.sin(i * Math.PI / 50) + length + top);
            if (i == mProgress) {
                path.moveTo(x, y);
            }
            path.quadTo(x, y, x + 1, y);
        }
        path.lineTo(left + width, top);
        path.lineTo(left, top);
        path.close();
        Paint wavePaint = new Paint();
        wavePaint.setStyle(Paint.Style.FILL);
        wavePaint.setAntiAlias(true);
        wavePaint.setColor(ORANGE_COLOR);
        canvas.drawPath(path, wavePaint);
    }

先写这么多，下次继续补全。欢迎到github帮我star。

附：Canvas的常用操作速查表