WaterLoadView 加载中水滴的动画

waterloadview 一个加载的水滴动画，三个水滴，向下移动，汇聚一个大水滴，主要使用了ondraw里面的简单绘制的几何图形。

github链接
很多的自定义View

直接把自定义View考入到项目就可以用了，十分的简单

1493560903265.mp4_1493561079.gif

使用方法：

<com.yk.myselfview.views.WaterLoadView
        android:id="@+id/waterload"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        yk:circleColor="#FF0077"
        yk:circleTop="70"
        yk:circleSmallRadio="5"
        yk:loadTime="1200" />

属性

属性	含义
circleColor	load的颜色
circleTop	整个load的动画的高度	(必须比view的高度小，否则显示不完)
circleSmallRadio	小圆的半径，也就是第三个圆圈，最大的为其两倍
loadTime	动画一次循环的时间（单位ms）

实现方法

public class WaterLoadView extends View {
private Path path=new Path();;
private Paint mPaint=new Paint();
private int mWidth;
private int mHeight;
private float mRadioFirst;
private int mRadioBig=2;
private int topWidth;
private float mValue;
private float mCircleValue;
private int mCircleColor;
private int mCircleSmallRadio;
private int mCircleTop;
private int mLoadTime;

public WaterLoadView(Context context) {
    super(context);
    init(context,null,0);
}

public WaterLoadView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init(context,attrs,0);
}

public WaterLoadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context,attrs,defStyleAttr);
}

private void init(Context context, AttributeSet attrs, int defStyleAttr) {
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.WaterLoadView, defStyleAttr, 0);
    int n = a.getIndexCount();

    for (int i = 0; i < n; i++) {
        int attr = a.getIndex(i);
        switch (attr){
            case R.styleable.WaterLoadView_circleColor:
                mCircleColor = a.getColor(attr, Color.WHITE);
                break;
            case R.styleable.WaterLoadView_circleSmallRadio:
                mCircleSmallRadio = a.getInt(attr, 15);
                break;
            case R.styleable.WaterLoadView_circleTop:
                mCircleTop = a.getInt(attr, 70);
                break;
            case R.styleable.WaterLoadView_loadTime:
                mLoadTime = a.getInt(attr, 1500);
                break;
        }
    }
    mRadioFirst=dip2px(context,mCircleSmallRadio);
    topWidth=(int) dip2px(context,mCircleTop);
    setAnim();
    setCircleAnim();
}




@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth = w;
    mHeight = h;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setColor(mCircleColor);
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(mWidth/2,(float) (topWidth-4*mRadioFirst*mValue),mRadioFirst,mPaint);
    canvas.drawCircle(mWidth/2,(float) (topWidth-7*mRadioFirst*mValue),mRadioFirst*0.85f,mPaint);
    canvas.drawCircle(mWidth/2,(float) (topWidth-10*mRadioFirst*mValue),mRadioFirst*0.7f,mPaint);
    path.reset();
    path.moveTo(mWidth/2-mRadioFirst-mRadioFirst*mCircleValue,topWidth);
    path.quadTo(mWidth/2,(topWidth-mRadioFirst+mRadioFirst-mRadioFirst*6*mCircleValue),mWidth/2+mRadioFirst+mRadioFirst*mCircleValue,topWidth);
    path.close();
    canvas.drawPath(path,mPaint);
    canvas.drawCircle(mWidth/2,topWidth,mRadioFirst+mRadioFirst*mCircleValue,mPaint);
}

private void setAnim() {
    ValueAnimator valueAnimator= ValueAnimator.ofFloat(1,0,1);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            mValue = (float) valueAnimator.getAnimatedValue();
            invalidate();
        }
    });
    valueAnimator.setDuration(mLoadTime);
    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    valueAnimator.start();
}
private void setCircleAnim() {
    ValueAnimator valueAnimator= ValueAnimator.ofFloat(0.5f,1f,0.5f);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            mCircleValue = (float) valueAnimator.getAnimatedValue();
            invalidate();
        }
    });
    valueAnimator.setDuration(mLoadTime);
    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    valueAnimator.start();
}

public  float dip2px(Context context, float dpValue) {
    float scale = context.getResources().getDisplayMetrics().density;
    return (dpValue * scale + 0.5f);
}
}

如上所示，主要是在ondraw里，画了四个圆圈，用动画改变其圆心的位置，由此达到运动的效果

@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(mCircleColor);
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mWidth/2,(float) (topWidth-4*mRadioFirst*mValue),mRadioFirst,mPaint);
canvas.drawCircle(mWidth/2,(float) (topWidth-7*mRadioFirst*mValue),mRadioFirst*0.85f,mPaint);
canvas.drawCircle(mWidth/2,(float) (topWidth-10*mRadioFirst*mValue),mRadioFirst*0.7f,mPaint);
path.reset();
path.moveTo(mWidth/2-mRadioFirst-mRadioFirst*mCircleValue,topWidth);
path.quadTo(mWidth/2,(topWidth-mRadioFirst+mRadioFirst-mRadioFirst*6*mCircleValue),mWidth/2+mRadioFirst+mRadioFirst*mCircleValue,topWidth);
path.close();
canvas.drawPath(path,mPaint);
canvas.drawCircle(mWidth/2,topWidth,mRadioFirst+mRadioFirst*mCircleValue,mPaint);
}

其中

path.moveTo(mWidth/2-mRadioFirst-mRadioFirst*mCircleValue,topWidth);
path.quadTo(mWidth/2,(topWidth-mRadioFirst+mRadioFirst-   mRadioFirst*6*mCircleValue),mWidth/2+mRadioFirst+mRadioFirst*mCircl eValue,topWidth);
path.close();
canvas.drawPath(path,mPaint);

为了实现一个水滴融进来的效果，使用了path的路径，贝塞尔曲线来实现的，不过过渡效果不是很好。暂时还没有想到办法优化。