前言
之前学习canvas画图的时候，写了一个Android的加载动画，代码托管在github上面。
这里是github的地址：
下面先附上实际运行的效果图。
主要的工作思路
需要绘制这样的动画，首先要学习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。
