Android自定义控件——仿百度网页加载动画

无意中百度网页加载很慢，出现了加载动画，于是想仿照这个加载动画写一个Android加载动画。 

下面是效果图，百度加载动画颜色好像不是这样变得，还没看清楚颜色变化就消失了(找不到好的工具生成gif，将就看)：

思路：两边的圆运动，中间的圆保持不动，然后按照规律在特定的值改变颜色。

 1.首先测量控件宽高，确定圆大小以及移动距离。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    radius = getDefaultSize(0, heightMeasureSpec) / 2; //圆半径
    width = getDefaultSize(0, widthMeasureSpec); //控件宽

    maxMove = width - radius * 2; //圆最大运行距离
}

2.绘制三个相同颜色的圆，让两边的圆来回运动

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    canvas.drawCircle(radius + time, radius, radius, paint);//左边的圆
    canvas.drawCircle(width / 2, radius, radius, paint);//中间的圆
    canvas.drawCircle(width - radius - time, radius, radius, paint);//右边的圆
}

 利用handler的sendEmptyMessageDelayed方法实现动态运动的效果。

Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case CHANGEING:
                    if(time == maxMove){//当运动到最大值时，从头开始
                        time = 0;
                    }
                    time = time + speed;
                    if(time > maxMove){
                        time = maxMove;
                    }
                    invalidate();
                    handler.sendEmptyMessageDelayed(CHANGEING, 30);
                    break;
            }
        }
    };

3.为圆形添加颜色替换

设置三种颜色，分别为初始的圆设置颜色

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    paint.setColor(leftColor);
    canvas.drawCircle(radius + time, radius, radius, paint);
    paint.setColor(centerColor);
    canvas.drawCircle(width / 2, radius, radius, paint);
    paint.setColor(rightColor);
    canvas.drawCircle(width - radius - time, radius, radius, paint);
}

在特定的条件下修改圆的颜色，因为在运动到最大值时，左边圆到达右边圆的初始位置，再次绘制时，左边绘制的就是从右边运动过来的圆，所以在这时，需要进行一次颜色的置换。

Handler handler = new Handler(){
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        switch (msg.what){
            case CHANGEING:
                if(time == maxMove){
                    time = 0;
                    isover = false;
                    int color = leftColor;
                    leftColor = rightColor;
                    rightColor = color;
                    invalidate();
                }
                time = time + speed;
                if(time > maxMove){
                    time = maxMove;
                }
                if(time >= maxMove / 2 && !isover){//当右边圆运动到一半，与中间圆置换颜色
                    int color = centerColor;
                    centerColor = rightColor;
                    rightColor = color;
                    isover = true;
                }
                invalidate();
                handler.sendEmptyMessageDelayed(CHANGEING, 30);
                break;
        }
    }
};

这个loading的动画就写完了，最后调用handler开始动画就可以了。

下载地址