Animating circle drawing in Jetpack compose

Question

I am trying to animate circle drawing using drawCircle on Canvas as follows:

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

It doesn't look like circle is being drawn, instead the circle starts to scale from the centre. Is it possible to achieve circle drawing effect as in along the radius similar to CircularProgressIndicator as shown?

Sure it is possible, with `drawArc` https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/ProgressIndicator.kt;l=332?q=progressindicator%20compose — EpicPandaForce, Apr 13 '21 at 18:49

score 8 · Accepted Answer · answered Apr 13 '21 at 19:54

Just to complete the code posted by @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))
   }

Thanks a lot! This sure is the complete answer:) – Varsha Kulkarni Apr 13 '21 at 23:44 — Varsha Kulkarni, Apr 13 '21 at 23:44

score 3 · Answer 2 · answered Apr 13 '21 at 19:08

Using drawArc as follows,

 drawArc(
     color = Color.Black,
     startAngle = 0f,
     sweepAngle = 360f * animatableCircle.value,
     useCenter = false,
     topLeft = Offset(size.width / 4, size.height / 4),
     size = Size(CIRCLE_RADIUS * 2 ,
                 CIRCLE_RADIUS * 2),
     style = Stroke(2.0f))

Animating circle drawing in Jetpack compose

2 Answers2