写在前面
说好的一个月记录一下每个月的学习成果呢，一拖再拖。以后不可以这样了。吐槽完自己，进入正题。
之前发布了一个瓶子加盖的loading动画自定义View-是时候弄个与众不同的Loading了，看到很多Jianer都给我留言说有适配问题，自己回去也想了想，也想修改一下，但是项目压身，就一拖再拖。
前几天我在material.up上面看到一个挺有意思的loading，又有点心动，就开始着手PPP了。
我们先看一下原设计。
Ghost_Design.gif
额。。。GIF截取的时候弄歪了，凑合着看吧。。。
然后下面是我自己的实现，和原设计有些不同，但大体上是实现了。
Ghost.gif
Ghost2.gif
如何实现？
看到原版设计图，应该不难想到把整个view分开为Ghost和Shadow。当然还有眼睛。
- 绘画Ghost轮廓及眼睛。
- 绘画影子Shadow。
- 实现动画。
这里，我做了一个设计，就是我整个绘画的区域占比宽比高是1：2，将整个绘画区域横向分隔成十份，在不同的比例位置作画，比例位置是我自己调试出来，这样整个Ghost和Shadow看起来会比较舒适。当然，你也可以按照你觉得舒适的比例来绘画。在上一篇文章中，很多的Jianer都反馈了适配的问题，所以这次我也很注重这个问题，自己反复试了不同的宽高，目前适配还是比较可以的，不会出现形变的问题。在此，也希望Jianer多多提意见，大家相互学习，一起成长！下面看下关键代码的实现。
绘画Ghost轮廓及眼睛
private Bitmap makeGhost(int w, int h) {
Bitmap bpGhost = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bpGhost);
int perRange = w / feet;
canvas.drawOval(0, 0, w, perDistance * 4, ghostPaint);
canvas.drawRect(0, perDistance * 2, w, perDistance * 5, ghostPaint);
for (int i = 0; i < feet; i++) {
canvas.drawOval(perRange * i, perDistance * 4, perRange * (i + 1), perDistance * 6, ghostPaint);
}
//draw eyes
ghostPaint.setColor(eyesColor);
for (int i = 0; i < 2; i++) {
canvas.drawCircle(perRange * (i + 1), perDistance * 3, eyesSize, ghostPaint);
}
ghostPaint.setColor(ghostColor);
return bpGhost;
}
Ghost这里我又将它分成了头部、身体、和脚脚。头部，用椭圆实现，身体用长方体实现，脚同样是用椭圆实现。最后再在固定比例的位置画上眼睛，这部分就完成了。后面会再给一张比例图，这样更好理解吧。
绘画影子Shadow
private Bitmap makeShadow(int w, int h, float scale) {
Bitmap bpShadow = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bpShadow);
canvas.drawOval(0, 0, w, h, shadowPaint);
//缩放bitmap
Matrix matrix = new Matrix();
matrix.setScale(scale, scale);
return Bitmap.createBitmap(bpShadow, 0, 0, w, h, matrix, true);
}
影子这里就相对简单，就是画个椭圆就OK了。
实现动画
private void startAnimation() {
anim = ValueAnimator.ofFloat(0, perDistance, 0);
anim.setDuration(duration)
.setRepeatCount(-1);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
offset = (float) anim.getAnimatedValue();
postInvalidate();
}
});
anim.start();
}
这次在动画实现这里还是思考了一下，按照以往的惯例，都会使用一个handler，然后发消息，改变偏移值，在根据偏移值重绘画面。现在不这样做了，而且这样做会有种跳跃的感觉，毕竟产生的值不够细腻。
这次动画实现直接使用了ValueAnimator，我们可以通过anim.getAnimatedValue()得到每个时间点的偏移值，然后通过这个偏移值重绘画面就可以了。而且这样做还有一个好处，就是可以反复播放动画，就不用再handler那里做各种各样的判断了。目前这样实现还没有发现什么不良影响。若大家发现了什么不良影响，也请告知小弟。
能自定义吗？
可以的，目前只想到Ghost颜色，眼睛颜色，眼睛大小，Shadow颜色，呼吸快慢（上下跳动的快慢）
<declare-styleable name="GhostLoading">
<attr name="ghostColor" format="color" />
<attr name="eyesColor" format="color" />
<attr name="shadowColor" format="color" />
<attr name="breedTime" format="integer" />
<attr name="eyesSize" format="integer" />
</declare-styleable>
额，最后临时手画的一个比例图。。。简直丑到没朋友。
比例.jpg
宽高比例1:2，分为十个等分。这主要是为了在后期绘图以及实现动画的时候提供一个参照比例。
写在后面
- 这次着重研究了一下屏幕适配的问题，目前试了几个奇葩比例，表现算是良好。
- 相比之前，动画的实现修改为用ValueAnimator实现。
- 代码尚未健壮，有待优化。
- 这里还有一个没有实现的就是原设计中，Ghost的眼睛是会眨的哦，添了几分活气，有兴趣的童鞋可以实现以下。
- 源码传送门GhoastLoading.java
网友评论