最近看到几篇自定义View和动画效果的文章，于是想自己抽几个练练手，主要是巩固和分析一下，加深自定义view和viewgroup流程。
58同城页面加载动画：
一.分析
需求如上图。先观察一下，这个动画可以分为三部分：第一部分是三角形，圆形和矩形在做同样一个平移动画，第二部分是做缩放动画的阴影，第三是不动的文字部分。
这个效果有很多种实现方式，今天主要研究自定义VIEW怎么去实现主体部分的动画。
动画的主体部分是这个一直在变形状并上下平移的部分，先不管阴影和文字。仔细观察，这部分一直在做同一组动画，那么我们只需要在动画的某个临界点改变它的形状即可，再深入一点，如果用自定view ，只需要在这个临界点重新draw一个形状即可，即调用invalidate()，在onDraw()里面判断画圆形，三角形还是矩形。
在这里，我们将三角形，圆形和矩形看成同一个view,这个view平移到底部后然后弹回去时改变了形状然后重复这一过程。作者在这儿采用的是属性动画ObjectAnimation去实现的平移，只需要作出向下平移的这段动画即可，弹回去这段可以调用setRepeatMode(ObjectAnimator.REVERSE)让其重复时反向即可，临界点的操作可以到AnimatorListener里面去做。
二.主要代码部分
1.自定义一个View,先画出图形，设置枚举状态
private Paint paint=newPaint(Paint.ANTI_ALIAS_FLAG);//到构造方法初始化，此处省略
private int width;
private float height;
private boolean isFirst=true;//第一次invalidate()
private int radius;//圆半径
private int mcount=1;//累加动画重复次数
privateViewShapemshape=ViewShape.CIRCLE；//默认圆形
@Override
protected voidonSizeChanged(intw, inth, intoldw, intoldh) {
super.onSizeChanged(w,h,oldw,oldh);
width=(float)w;//
height=(float) h;
radius=width/20;
doAnimation();//动画
}
//绘制
@Override
protected voidonDraw(Canvas canvas) {
super.onDraw(canvas);
if(mshape==ViewShape.CIRCLE) {//圆形
paint.setColor(Color.BLUE);
canvas.drawCircle(width/2,height/4,radius,paint);
}else if(mshape==ViewShape.TRIANGLE){//三角形，用Path绘制，需要计算坐标
paint.setColor(Color.GREEN);
Path path=newPath();
path.moveTo(width/2,height/4-radius);
path.lineTo(width/2-radius,height/4+radius);
path.lineTo(width/2+radius,height/4+radius);
canvas.drawPath(path,paint);
}else{//矩形
paint.setColor(Color.RED);
canvas.drawRect(width/2-radius,height/4-radius,width/2+radius,height/4+radius,paint);
}}
//列出枚举
public enum ViewShape{
CIRCLE,RANGE,TRIANGLE
}
2.动画效果，以及设置监听去改变枚举状态
private void doAnimation(){
ObjectAnimator anim=ObjectAnimator.ofFloat(this,"translationY",0f,height-height/3);
anim.setInterpolator(newAccelerateInterpolator());
anim.setDuration(800);
anim.setRepeatMode(ObjectAnimator.REVERSE);
anim.setRepeatCount(ObjectAnimator.INFINITE);
anim.start();
anim.addListener(newAnimator.AnimatorListener() {
@Override
public voidonAnimationRepeat(Animator animation) {//只需要在重复监听里操作即可
if(isFirst){
isFirst=false;
}else{
if(mcount%2==0){//判断弹上去的时候，图形并没有发生变化
if(mshape==ViewShape.CIRCLE){//改变枚举状态
mshape=ViewShape.TRIANGLE;
}else if(mshape==ViewShape.TRIANGLE){
mshape=ViewShape.RANGE;
}else{
mshape=ViewShape.CIRCLE;
}
}
}
mcount++;//累加用于判断
invalidate();
}
});
}
这里我调用控件时设置的控件宽高均为matchParent，效果如下
The end
ok，今天实现的效果就到这里，关于阴影部分:可以看到它在view下落的时候缩小，弹回去变大，实现思路基本差不多。这样写完还不能用，需要进一步的去做屏幕适配和性能优化，但是大概的流程我们已经清楚了。
关于一些思考问题：1.onDraw()的canvas在调用invalidate()之后和原来相比并不是同一个，原因在哪
2.view的绘制流程，onSizeChanged(）
哈哈，发现问题请多反馈。