android首页加载动画效果,一个有趣的android加载动画

前言

之前学习canvas画图的时候，写了一个Android的加载动画，代码托管在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。

附：Canvas的常用操作速查表