android 漂亮的loading,Android 怎样画出一个好看的LoadingView~

哈。。。自定义View真的不难， 一些酷炫的View看着很玄乎，其实只要把自己的思路捋清晰了一步一步的去做绝对能做出来，过程很痛苦但写出来了也很有成就感不是~接下来我分享的是一个自己画的看着很神奇(我反正是觉得挺神奇的 = =！)其实炒鸡简单的自定义Loading。

上效果图

loading.gif

下面开始说一下画这个loadingView的过程。

第一步

观察一下上面的这个动图，想象下当他是静止时的样子，在纸上画画~这里我就不贴图了，我帮你们想，上下左右各一个圆并且边缘处有交集，最原始的图只有4个圆，就是这样的。上代码

for (int i = 0; i < 4; i++) {

canvas.rotate(90 * i);

mPaint.setColor(colors[i]);

canvas.drawCircle(0, -((width / 2 - insideRectWidth) / 2 + insideRectWidth) + oneStepValue, threeStepValue, mPaint);

}

我们在onDraw方法里面写一个for循环，循环4次每循环1次画一个圆然后将画布旋转90°这样4个圆就画出来了。

第二步

4个方位的圆已经画出来了如何让他动起来呢？

我们先看一下这行代码

canvas.rotate(twoStepValue);

意思是将画布旋转twoStepValue度，twoStepValue这个值是通过

PropertyValuesHolder twoAnimation = PropertyValuesHolder.ofInt(TWOANIM, 0, 359);

这个属性持有者来动态改变的 从0-359度，至于不到360度的原因是在圆的角度上来说 360度==0度，如果写360度就会在这个度数上重复两次，就会有那么点点的能感觉出来的卡顿。

oneStepValue = (int) animation.getAnimatedValue(ONEANIM);

twoStepValue = (int) animation.getAnimatedValue(TWOANIM);

threeStepValue = (int) animation.getAnimatedValue(THREE);

invalidate();

这里赋值完成之后刷新界面，四个方位的圆就跟着动起来了。

第三步

上两步完成之后4个圆确实是动起来了，但是也只是绕着控件周围移动而不会向控件中心移动，这不是我们想要的效果，下面说下向中心移动的思路在Android中画出来的圆是由x，y坐标构成圆心加上半径组成的。。。所以呢，我们只需要更改他的y坐标就好啦是不是炒鸡简单！！！

canvas.drawCircle(0, -((width / 2 - insideRectWidth) / 2 + insideRectWidth) + oneStepValue, threeStepValue, mPaint);

x坐标永远为0，动态的改变y的坐标从而达到我们想要的效果。

第四步

现在的View已经很漂亮了~不过还是可以在小小的点缀下的, threeStepValue这个变量是不是很眼熟没错，在步骤三出现过，他的本名叫半径，是一个动态的半径(这个半径是算出来的，不贴怎么算的了后面有源码)。。改变他，就会忽大忽小了

完成了~~我知道写文章要用Markdown了！确实很优雅啊又学到了新知识共同进步！加油以后我可能每周都会写点东西，嗯。。不管写的好不好我都要写，再就是希望对各位看官稍微有那么点帮助我就很开心了~