waterloadview 一个加载的水滴动画，三个水滴，向下移动，汇聚一个大水滴，主要使用了ondraw里面的简单绘制的几何图形。
直接把自定义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);
