一看就喜欢的loading动画效果Android分析实现

2019-12-10 19:13:34于丽

我们需要处理的主要有两个部分:

  • 1. 随着进度往前绘制的进度条;
  • 2. 不断飞出来的小叶片;

    我们先处理第一部分 - 随着进度往前绘制的进度条:
    进度条的位置根据外层传入的 progress 进行计算,可以分为图中 1、2、3 三个阶段:

    一看就喜欢的loading动画效果Android分析实现

    • 1. 当progress 较小,算出的当前距离还在弧形以内时,需要绘制如图所示 1 区域的弧形,其余部分用白色填充;
    • 2. 当 progress 算出的距离到2时,需要绘制棕色半圆弧形,其余部分用白色矩形填充;
    • 3. 当 progress 算出的距离到3 时,需要绘制棕色半圆弧形,棕色矩形,白色矩形;
    • 4. 当 progress 算出的距离到头时,需要绘制棕色半圆弧形,棕色矩形;(可以合并到3中)

      首先根据进度条的宽度和当前进度、总进度算出当前的位置:

      //mProgressWidth为进度条的宽度,根据当前进度算出进度条的位置 
      mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS; 
      

      然后按照上面的逻辑进行绘制,其中需要计算上图中的红色弧角角度,计算方法如下:

      // 单边角度 
      int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)/ (float) mArcRadius));