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

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

定义两个常亮分别记录中等振幅和之间的振幅差:

// 中等振幅大小 
private static final int MIDDLE_AMPLITUDE = 13; 
// 不同类型之间的振幅差距 
private static final int AMPLITUDE_DISPARITY = 5; 
[html] view plain copy 在CODE上查看代码片派生到我的代码片
// 中等振幅大小 
private int mMiddleAmplitude = MIDDLE_AMPLITUDE; 
// 振幅差 
private int mAmplitudeDisparity = AMPLITUDE_DISPARITY; 

有了以上信息,我们则可以获取到叶子的Y值:

// 通过叶子信息获取当前叶子的Y值 
private int getLocationY(Leaf leaf) { 
  // y = A(wx+Q)+h 
  float w = (float) ((float) 2 * Math.PI / mProgressWidth); 
  float a = mMiddleAmplitude; 
  switch (leaf.type) { 
    case LITTLE: 
      // 小振幅 = 中等振幅 - 振幅差 
      a = mMiddleAmplitude - mAmplitudeDisparity; 
      break; 
    case MIDDLE: 
      a = mMiddleAmplitude; 
      break; 
    case BIG: 
      // 小振幅 = 中等振幅 + 振幅差 
      a = mMiddleAmplitude + mAmplitudeDisparity; 
      break; 
    default: 
      break; 
  } 
  Log.i(TAG, "---a = " + a + "---w = " + w + "--leaf.x = " + leaf.x); 
  return (int) (a * Math.sin(w * leaf.x)) + mArcRadius * 2 / 3; 
} 

接下来,我们开始绘制叶子:

/** 
 * 绘制叶子 
 *  
 * @param canvas 
 */ 
private void drawLeafs(Canvas canvas) { 
  long currentTime = System.currentTimeMillis(); 
  for (int i = 0; i < mLeafInfos.size(); i++) { 
    Leaf leaf = mLeafInfos.get(i); 
    if (currentTime > leaf.startTime && leaf.startTime != 0) { 
      // 绘制叶子--根据叶子的类型和当前时间得出叶子的(x,y) 
      getLeafLocation(leaf, currentTime); 
      // 根据时间计算旋转角度 
      canvas.save(); 
      // 通过Matrix控制叶子旋转 
      Matrix matrix = new Matrix(); 
      float transX = mLeftMargin + leaf.x; 
      float transY = mLeftMargin + leaf.y; 
      Log.i(TAG, "left.x = " + leaf.x + "--leaf.y=" + leaf.y); 
      matrix.postTranslate(transX, transY); 
      // 通过时间关联旋转角度,则可以直接通过修改LEAF_ROTATE_TIME调节叶子旋转快慢 
      float rotateFraction = ((currentTime - leaf.startTime) % LEAF_ROTATE_TIME) 
          / (float) LEAF_ROTATE_TIME; 
      int angle = (int) (rotateFraction * 360); 
      // 根据叶子旋转方向确定叶子旋转角度 
      int rotate = leaf.rotateDirection == 0 ? angle + leaf.rotateAngle : -angle 
          + leaf.rotateAngle; 
      matrix.postRotate(rotate, transX 
          + mLeafWidth / 2, transY + mLeafHeight / 2); 
      canvas.drawBitmap(mLeafBitmap, matrix, mBitmapPaint); 
      canvas.restore(); 
    } else { 
      continue; 
    } 
  } 
}