Android怎样画出一个好看的LoadingView~

转载请注明出处http://www.jianshu.com/p/55e1b5f50dee

哈。。。自定义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了！确实很优雅啊}又学到了新知识_{共同进步！加油}以后我可能每周都会写点东西，嗯。。不管写的好不好我都要写，再就是希望对各位看官稍微有那么点帮助我就很开心了~

github项目链接，觉得有帮助就给个星星呗~