在 Jetpack compose 中绘制动画圆圈

Var*_*rni 6 android kotlin android-jetpack-compose android-jetpack-compose-canvas

我正在尝试使用drawCircleon 来制作圆形绘图的动画Canvas,如下所示:

 drawCircle(
     color = Color.Black,
     radius = 200f * animatableCircle.value,
     center = Offset(size.width / 4, size.height / 4),
     style = Stroke(2f)
)

Run Code Online (Sandbox Code Playgroud)

在此输入图像描述 它看起来不像正在绘制圆,而是圆开始从中心缩放。是否可以实现如图所示的沿半径画圆的效果CircularProgressIndicator在此输入图像描述

Gab*_*tti 8

只是为了完成@Varsha Kulkarni发布的代码:(+1)

    val radius = 200f
    val animateFloat = remember { Animatable(0f) }
    LaunchedEffect(animateFloat) {
        animateFloat.animateTo(
            targetValue = 1f,
            animationSpec = tween(durationMillis = 3000, easing = LinearEasing))
    }

   Canvas(modifier = Modifier.fillMaxSize()){
       drawArc(
           color = Color.Black,
           startAngle = 0f,
           sweepAngle = 360f * animateFloat.value,
           useCenter = false,
           topLeft = Offset(size.width / 4, size.height / 4),
           size = Size(radius * 2 ,
               radius * 2),
           style = Stroke(2.0f))
   }
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述