1. 简介和效果分析
一直都觉得有很多loading动画挺炫酷的,然后自己看过一些之后也想实现一个,加强一下对绘制view的练习,能力有限,很多地方的实现的有欠考虑和逻辑优化,不管怎么样画了两天还是把效果做的还可以,如果大家有什么意见或者建议可以给我留言,望斧正。先看一下效果图吧。这个view有两种状态,一是成功的状态,打上一个大勾,另外一个就是失败的状态,会显示一个红叉表示失败。
这个是下载或者说加载成功的动画可以看到外圈有一个片进度加载过程,每转一小圈就是加载成功一部分(在这里我是把100%的进度分为了10次,也就是说如果成功应该是转了十圈的),圆圈的中间会掉下一个小圆(强行是一个水滴。。),然后水涨船高,就加载成功了。然后再看一下加载失败的图。
加载的前部分就不说了,不同的就是在加载过程中如果失败的话就是打叉。效果我们也看完了,来看看怎么实现的吧。我们按过程来拆解。
2. 实现过程
外圈背景和进度弧的绘制
2.1 先看背景圆圈吧
colorArc = Color.argb(255, 0, 150, 136);
colorsoild = Color.argb(255, 173, 216, 230);
colorFork = Color.argb(255, 238, 0, 0);
arcPaint = new Paint();
arcPaint.setAntiAlias(true);
arcPaint.setColor(colorArc);
arcPaint.setStrokeWidth(strokeWidth);
arcPaint.setStyle(Paint.Style.STROKE);
circlePaint = new Paint(arcPaint);
circlePaint.setColor(colorsoild);
我们先是定义了paint,那是必须的,然后初始化,然后就在ondraw里面进行绘制了。不过还有一个重要的东西,就是圆弧的动态的啊,那是怎么做的呢,我在这是使用了属性动画,我们来看:
//圆圈旋转动画
mRotateAnimation = ValueAnimator.ofFloat(0f, 1f);