自定义加载等待动画，仿金山词霸

打开金山词霸，当加载下一页或者切换页面时，数据没有立即加载出来，会出现一个LoadingView
一起看看效果：
这里写图片描述

分析一下效果图,关键的技术点如下：

1.绘制除出9个圆点(圆点的个数可以自己定义)
2.颜色的变化是逐级发生变化.

画圆点的方法:

public void drawCircle (float cx, float cy, float radius, Paint paint)

cx 小圆点x坐标
cy 小圆点y坐标
radius 小圆点半径
paint 画笔

这里写图片描述

每个小圆所占据的角度

angle = (float) (2 * Math.PI / count);

 每个小圆点的圆心坐标
 x = getWidth() / 2 + radius * Math.cos(i * angle)
 y = getWidth() / 2 - radius * Math.sin(i * angle)

 i 的值这里是1~9

2.颜色逐级变化

颜色的色值是由32位2进制表示,因此我们可以通过位移拿到每隔8位的色值,将颜色拆分出来,通过动态的的给fraction 赋值,达到颜色渐变的效果.

public class ColorUtil {
    // 成新的颜色值
    public static int getNewColorByStartEndColor(Context context, float fraction, int startValue, int endValue) {
        return evaluate(fraction, startValue, endValue);
    }
    /**
     * 成新的颜色值
     *
     * @param fraction   颜色取值的级别 (0.0f ~ 1.0f)
     * @param startValue 开始显示的颜色
     * @param endValue   结束显示的颜色
     * @return 返回生成新的颜色值
     */
    public static int evaluate(float fraction, int startValue, int endValue) {
        int startA = (startValue >> 24) & 0xff;
        int startR = (startValue >> 16) & 0xff;
        int startG = (startValue >> 8) & 0xff;
        int startB = startValue & 0xff;

        int endA = (endValue >> 24) & 0xff;
        int endR = (endValue >> 16) & 0xff;
        int endG = (endValue >> 8) & 0xff;
        int endB = endValue & 0xff;

        return ((startA + (int) (fraction * (endA - startA))) << 24) |
                ((startR + (int) (fraction * (endR - startR))) << 16) |
                ((startG + (int) (fraction * (endG - startG))) << 8) |
                ((startB + (int) (fraction * (endB - startB))));
    }

}

整体代码:

package com.iyuba.myapplication.View;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;
import com.iyuba.myapplication.ColorUtil;
import com.iyuba.myapplication.R;
/**
 * 作者：mingyu on 16-6-16 09:33
 * <p/>
 * 邮箱：[email protected]
 */
public class LoadingView extends View {
    private int count = 9;
    private Paint paint;
    private Context mContext;
    int j = 0;
    private float angle;
    private int startColor = Color.BLUE;
    private int endColor = Color.TRANSPARENT;
    public LoadingView(Context context) {
        this(context, null);
    }
    public LoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        TypedArray typedArray =context.getTheme().obtainStyledAttributes(attrs,R.styleable.loadView,defStyleAttr,0);
        int n = typedArray.getIndexCount();
        for(int i=0;i<n;i++){
            int attr =typedArray.getIndex(i);
            switch (attr){
                case R.styleable.loadView_startColor:
                    startColor = typedArray.getColor(attr,Color.BLUE);
                    break;
                case R.styleable.loadView_endColor:
                    endColor   = typedArray.getColor(attr,Color.TRANSPARENT);
                    break;
                default:
                    break;
            }
        }
        typedArray.recycle();
        init();
    }
    private void init() {
        angle = (float) (2 * Math.PI / count);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        //小圆半径
        int dot_radius = 4;
        //大圆半径
        int radius = getWidth() / 2 - dot_radius;
        for (int i = 0; i < count; i++) {
            paint.setColor(ColorUtil.getNewColorByStartEndColor(mContext, j * 1.0f / count,startColor,endColor));
            canvas.drawCircle((float) (getWidth() / 2 + radius * Math.cos(i * angle)), (float) (getWidth() / 2 - radius * Math.sin(i * angle)), dot_radius, paint);

            j++;
            j =j%count;
        }
        //同一个位置的圆点,下次绘制不同的颜色 j++
        j++;
        handler.sendEmptyMessageDelayed(0,100);
    }
    Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            invalidate();
        }
    };
}

源码下载

自定义加载等待动画，仿金山词霸

猜你喜欢