Compose自定义View实现绘制Rainbow运动三环效果

@Composable
fun drawCircle(type: Int,
               fraction: Float,
               isBg: Boolean, modifier: Modifier){
  val colorResource = getColorResource(type)
  val color = colorResource(id = colorResource)
  Canvas(modifier = modifier.fillMaxSize()){
    val contentWidth = size.width
    val contentHeight = size.height
    val itemWidth = contentWidth / 7.2f
    val spaceWidth = itemWidth / 6.5f
    val rectF = createTargetRectF(type, itemWidth, spaceWidth, contentWidth, contentHeight)
    val space = if (type == RainbowConstant.TARGET_THIRD_TYPE) 
    spaceWidth/2.0f else spaceWidth
    val sweepAngel = fraction * 180
    val targetModel = createTargetModel(isBg, type, rectF, itemWidth, space, sweepAngel)
    println("drawRainbow width:${rectF.width()}, height${rectF.height()}")
    if (checkFractionISSMall(fraction, type)) {
      val roundRectF = createRoundRectF(type, itemWidth, spaceWidth, contentHeight)
      drawRoundRect(
        color = color,
        topLeft = Offset(x = roundRectF.left, y = roundRectF.top),
        size = Size(roundRectF.width(), roundRectF.height()),
        cornerRadius = CornerRadius(spaceWidth / 2.0f, spaceWidth / 2.0f)
      )
    } else {
      withTransfORM({ translate(left = rectF.left, top = rectF.top) }) {
        targetModel.createComponents()
        targetModel.drawComponents(this, color, isBg)
      }
    }
  }
}

val animator1 = remember{ Animatable(0f, Float.VectorConverter) }
val animator2 = remember{ Animatable(0f, Float.VectorConverter) }
val animator3 = remember{ Animatable(0f, Float.VectorConverter) }
​
val tweenSpec = tween<Float>(durationMillis = 1000, delayMillis = 600, easing = FastOutSlowInEasing)
LaunchedEffect(Unit){
  animator1.animateTo(targetValue = 0.5f, animationSpec = tweenSpec)
}
LaunchedEffect(Unit){
  animator2.animateTo(targetValue = 0.7f, animationSpec = tweenSpec)
}
LaunchedEffect(Unit){
  animator3.animateTo(targetValue = 0.8f, animationSpec = tweenSpec)
}
​
drawCircle(
  type = RainbowConstant.TARGET_FIRST_TYPE,
  fraction = animator1.value,
  isBg = false,
  modifier
)
drawCircle(
  type = RainbowConstant.TARGET_SECOND_TYPE,
  fraction = animator2.value,
  isBg = false,
  modifier
)
drawCircle(
  type = RainbowConstant.TARGET_THIRD_TYPE,
  fraction = animator3.value,
  isBg = false,
  modifier
)

private lateinit var centerCircle: Path
private lateinit var wrapperCircle: Path
private lateinit var innerCircle: Path
private lateinit var wrapperStartPath: Path
private lateinit var wrapperEndPath: Path
private lateinit var innerStartPath: Path
private lateinit var innerEndPath: Path

fun createCommonPoint(rectF: RectF, sweepAngel: Float): PointF {
  val radius = rectF.width() / 2
  val halfCircleLength = (Math.PI * radius).toFloat()
  val pathOriginal = Path()
  pathOriginal.moveTo(rectF.left, (rectF.top + rectF.bottom) / 2)
  pathOriginal.arcTo(rectF, 180f, 180f, false)
  val pathMeasure = PathMeasure(pathOriginal, false)
  val points = FloatArray(2)
  val pointLength = halfCircleLength * sweepAngel / 180f
  pathMeasure.getPosTan(pointLength, points, null)
  return PointF(points[0], points[1])
}
​
fun createEndPoint(rectF: RectF, sweepAngel: Float): PointF {
  val radius = rectF.width() / 2
  val halfCircleLength = (Math.PI * radius).toFloat()
  val pathOriginal = Path()
  pathOriginal.moveTo(rectF.right, (rectF.top + rectF.bottom) / 2)
  pathOriginal.arcTo(rectF, 0f, -180f, false)
  val pathMeasure = PathMeasure(pathOriginal, false)
  val points = FloatArray(2)
  val pointLength = halfCircleLength * sweepAngel / 180f
  pathMeasure.getPosTan(pointLength, points, null)
  return PointF(points[0], points[1])
}

fun createQuadPath(): Path {
  quadPath = Path()
  quadPath.apply {
  moveTo(startPointF.x, startPointF.y)
  quadTo(ctrlPointF.x, ctrlPointF.y, endPointF.x, endPointF.y)
  lineTo(centerPointF.x, centerPointF.y)
  close()
  }
  return quadPath
}

private fun createInnerPath() {
  innerStartPath = Path()
  val startQuadModel = QuadModel()
  startQuadModel.centerPointF =
  startQuadModel.createCommonPoint(innerStartRectF, innerFixAngel)
  startQuadModel.ctrlPointF = startQuadModel.createCommonPoint(innerEndRectF, 0f)
  startQuadModel.startPointF =
  startQuadModel.createCommonPoint(innerEndRectF, innerFixAngel)
  startQuadModel.endPointF = startQuadModel.createCommonPoint(innerStartRectF, 0f)
  innerStartPath = startQuadModel.createQuadPath()
  val endQuadModel = QuadModel()
  endQuadModel.centerPointF =
  endQuadModel.createEndPoint(innerStartRectF, 180 - sweepAngel + innerFixAngel)
  endQuadModel.ctrlPointF = endQuadModel.createCommonPoint(innerEndRectF, sweepAngel)
  endQuadModel.startPointF = endQuadModel.createCommonPoint(innerStartRectF, sweepAngel)
  endQuadModel.endPointF =
  endQuadModel.createEndPoint(innerEndRectF, 180 - sweepAngel + innerFixAngel)
  innerEndPath = endQuadModel.createQuadPath()
}
​
private fun createWrapperPath() {
  val startQuadModel = QuadModel()
  startQuadModel.centerPointF =
  startQuadModel.createCommonPoint(wrapperEndRectF, wrapperFixAngel)
  startQuadModel.ctrlPointF = startQuadModel.createCommonPoint(wrapperStartRectF, 0f)
  startQuadModel.startPointF = startQuadModel.createCommonPoint(wrapperEndRectF, 0f)
  startQuadModel.endPointF =
  startQuadModel.createCommonPoint(wrapperStartRectF, wrapperFixAngel)
  wrapperStartPath = startQuadModel.createQuadPath()
  val endQuadModel = QuadModel()
  endQuadModel.centerPointF =
  endQuadModel.createEndPoint(wrapperEndRectF, 180 - sweepAngel + wrapperFixAngel)
  endQuadModel.ctrlPointF = endQuadModel.createCommonPoint(wrapperStartRectF, sweepAngel)
  endQuadModel.startPointF =
  endQuadModel.createEndPoint(wrapperStartRectF, 180 - sweepAngel + wrapperFixAngel)
  endQuadModel.endPointF = endQuadModel.createCommonPoint(wrapperEndRectF, sweepAngel)
  wrapperEndPath = endQuadModel.createQuadPath()
}