Animating circle drawing in Jetpack compose

user_1169441 0
Viewed 2250

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)
)

enter image description here 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? enter image description here

android-jetpack-compose kotlin android
2 Answers

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))
   }

enter image description here

user_20165620

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))
user_11694410
Related