一个非常漂亮的自定义Loading，有加载成功和失败两种状态

中间变化的大圆在左侧第1个小圆到达中间时才出现大圆，在第1个小圆准备向右侧移动时消失，变化范围(-widthSpecSize 5/4 , widthSpecSize 5/4)之间。大圆的半径在小圆半径和大圆半径之间，我们用radiusbig = radiusbig - radiusSmall (Math.abs(moveX)) / (widthSpecSize 5/4)计算大圆半径，可以得到慢慢变大和变小的效果，然后控制在小于radiusSmall时用radiusSmall。

if (Math.abs(moveX) > 0 && Math.abs(moveX) < widthSpecSize * 5 / 4) {
  radiusbig = radiusbig - radiusSmall * (Math.abs(moveX)) / (widthSpecSize * 5 / 4);
  radiusbig = (radiusbig > radiusSmall) ? radiusbig : radiusSmall;
  canvas.drawCircle(widthSpecSize / 2, heightSpecSize / 2, radiusbig, mPaint);
}

3. 动画终止的控制

正常当一个循环结束时我们需要重新给moveX赋值为widthSpecSize * (-7/4)，当收到成功或失败状态时需要判断当前的状态，等到动画进行到结束状态（小圆依次从左边进入中间后）。见下面代码，mState为当前状态（0失败，1成功，-1默认）。

我重新赋值时将moveX设为 widthSpecSize * (-9/4)，因为一个循环结束后有点停顿会感觉舒服点，这个无所谓，自己感觉而已

if (mState < 0) {
  moveX = (moveX > widthSpecSize * 7 / 4) 
  ? widthSpecSize * (-9 / 4) : moveX + 12;
} else {
  if (moveX > 0)
      moveX = (moveX > widthSpecSize * 7 / 4) 
      ? widthSpecSize * (-9 / 4) : moveX + 12;
  else if (moveX < 0 && mflag) {
      moveX += 12;
      if (Math.abs(moveX) < 12)
          mflag = false;
  }
}

4. 显示成功/失败图片

这个简单，在收到成功或失败状态，待动画完成时先画一个大圆，再画一个bitmap

if (Math.abs(moveX) < 12 && mState >= 0) {
          if (mState == 0) {
              canvas.drawCircle(widthSpecSize / 2,
               heightSpecSize / 2, radiusbig, mPaint);
              Bitmap bitmap = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.connect_failed);
              canvas.drawBitmap(bitmap, null, new Rect(widthSpecSize 
              / 2 - radiusbig, heightSpecSize / 2 - radiusbig, 
              widthSpecSize / 2 + radiusbig, heightSpecSize / 2 + radiusbig), mPaint);
          }
          if (mState == 1) {
              canvas.drawCircle(widthSpecSize / 2, heightSpecSize / 2, radiusbig, mPaint);
              Bitmap bitmap = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.connect_success);
              canvas.drawBitmap(bitmap, null, new Rect(widthSpecSize / 2 
              - radiusbig, heightSpecSize / 2 - radiusbig, widthSpecSize 
              / 2 + radiusbig, heightSpecSize / 2 + radiusbig), mPaint);
          }
      }

5.优化

可以优化，将paint的颜色等属性、大小圆的半径、优化画小圆的逻辑，使小圆个数可变..........

其实核心的就是想法，随便怎么优化。反正我就弄到这了，油而不腻，我觉得挺好，不需要太多优化。吼吼....

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!