- 最近在学习RxJava2.0(其实RxJava1.0也没有学)所以自定义控件这里有点耽误了。。。写了一个Loading初学者可以用来当做参考,如果写的有误请告诉我,以免误导其他人3Q~
效果图:(Gif有点鬼畜了,我并没有调这么快。。。)
loadv.gif
1,定义变量
//控件大小 onSizeChanged中使用Math.min(w,h) 取正方形
//这里我没有考虑控件大小为wrap_content的情况,如果你想做的话可以去自己测量。
private int size;
//四个点之间的间隔
private int interval = 5;
//颜色
private static final int[] COLORS = new int[]{0xFFEF800b, 0xFFFAEA0b, 0xFFFF0000, 0xFFAAEAFF};
//画笔
private Paint mPaint;
//当前正在绘制的点
private int currentIndex = 0;
2,初始化工作...这里就是初始化一个画笔
private void init() {
//初始化画笔
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
}
3,开始动画方法
public void startAnim() {
//半径 * (0f-1f)实现圆的从小到大渐变
ValueAnimator v = ValueAnimator.ofFloat(0, 1f);
v.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
animValue = (float) animation.getAnimatedValue();
invalidate();
}
});
v.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationRepeat(Animator animation) {
super.onAnimationRepeat(animation);
currentIndex++;
//current<4的时候是画4个圆 等于5的时候是圆缩小的动画 onDraw里面有判断
if (currentIndex == 5) {
currentIndex = 0;
}
}
});
v.setDuration(400);
v.setRepeatCount(ValueAnimator.INFINITE);
v.setInterpolator(new AccelerateDecelerateInterpolator());
v.start();
}
4,onDraw
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.rotate(-90, size / 2, size / 2);
//每个圆所在正方形的长度
int length = (size / 2 - interval);
//圆的半径
int radius = length / 2;
for (int i = 0; i < 4; i++) {
mPaint.setColor(COLORS[i]);
//控制半径的变量 (0f - 1f)
float tempValue = animValue;
if (currentIndex < 4) {
//当currentIndex 大于 当前圆的下标时证明这个下标所代表的圆已经被绘制,所以直接画出来
if (currentIndex > i) {
tempValue = 1;
}
//当currentIndex 小于 当前圆的下标时证明这个下标所代表的圆正在等待绘制,隐藏掉
if (currentIndex < i) {
tempValue = 0;
}
//当前下标所代表的圆 动态变化
if (currentIndex == i) {
tempValue = animValue;
}
//PS上面的判断是我按照我自己的思路来进行的渐显(一个圆一个圆的显示),
// 你如果有更好的思路,请告诉我
//共同进步✧(≖ ≖✿)
//加油~
} else {
//当currentIndex >=4的时候 的时候 走一个旋转动画
canvas.rotate(90 * tempValue, size / 2, size / 2);
tempValue = Math.abs(0.7f - tempValue);
}
//顺时针旋转90° 画出每一个圆
canvas.rotate(90, size / 2, size / 2);
canvas.drawCircle(radius, radius, radius * tempValue, mPaint);
}
}
- 结束~
很简单的一个自定义Loading,效果还可以做的更好我懒得做了,初学自定义控件的朋友可以拿去练手,加油
点个呗~
Github传送门
网友评论