你好!请尝试这个并回答我。
@Composable
fun Indicator(
size: Dp = 32.dp,
sweepAngle: Float = 90f,
color: Color = MaterialTheme.colors.primary,
strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
) {
val transition = rememberInfiniteTransition()
val currentArcStartAngle by transition.animateValue(
0,
360,
Int.VectorConverter,
infiniteRepeatable(
animation = tween(
durationMillis = 1100,
easing = LinearEasing
)
)
)
val stroke = with(LocalDensity.current) {
Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Square)
}
Canvas(
Modifier
.progressSemantics()
.size(size)
.padding(strokeWidth / 2)
) {
drawCircle(Color.LightGray, style = stroke)
drawArc(
color,
startAngle = currentArcStartAngle.toFloat() - 90,
sweepAngle = sweepAngle,
useCenter = false,
style = stroke
)
}
}
简而言之,在画布上绘制一个圆,然后在其上方绘制指示器弧。
可传递的动画将“currentArcStartAngle”变量的值从0循环到360(这是圆中的角度),并使用此变量来设置指示器弧的起始角度。
为了更好地理解起始角度,请在“drawArc”中使用“useCenter = true”。
“currentArcStartAngle”是状态,因此每次更改都会导致重新组合画布并以新的起始角度重新绘制。
结果: