Seconds Counter Animation in jetpack compose

• Add this in viewmodel,
  
  

val seconds = (0..100)
    .asSequence()
    .asFlow()
    .map {
        if (it in 0..9) "0$it" else it
    }
    .onEach { delay(1000) }

• Add this screen
  
  

  import androidx.compose.animation.AnimatedContent
  import androidx.compose.animation.ContentTransform
  import androidx.compose.animation.SizeTransform
  import androidx.compose.animation.core.tween
  import androidx.compose.animation.fadeIn
  import androidx.compose.animation.fadeOut
  import androidx.compose.animation.slideInVertically
  import androidx.compose.animation.slideOutVertically
  import androidx.compose.animation.togetherWith
  import androidx.compose.foundation.layout.Arrangement
  import androidx.compose.foundation.layout.Column
  import androidx.compose.foundation.layout.fillMaxSize
  import androidx.compose.material.MaterialTheme
  import androidx.compose.material.Text
  import androidx.compose.runtime.Composable
  import androidx.compose.runtime.collectAsState
  import androidx.compose.runtime.getValue
  import androidx.compose.ui.Alignment
  import androidx.compose.ui.Modifier
  import androidx.compose.ui.text.TextStyle
  import androidx.compose.ui.text.style.TextAlign
  import androidx.lifecycle.viewmodel.compose.viewModel
  import com.example.jetpacktutorials.ui.theme.viewmodel.MainViewModel
  
  
  @Composable
  fun CounterSeconds(mainViewModel: MainViewModel = viewModel()) {
      val seconds by mainViewModel.seconds.collectAsState(initial = "00")
  
      Column(
          modifier = Modifier.fillMaxSize(),
          verticalArrangement = Arrangement.Center,
          horizontalAlignment = Alignment.CenterHorizontally
      ) {
          AnimatedContent(
              targetState = seconds,
              transitionSpec = {
                  addAnimation().using(
                      sizeTransform = SizeTransform(clip = false)
                  )
              }, label = ""
          ) { targetCount ->
              Text(
                  text = "$targetCount",
                  style = TextStyle(fontSize = MaterialTheme.typography.h1.fontSize),
                  textAlign = TextAlign.Center
              )
          }
      }
  }
  
  
  
  fun addAnimation(duration: Int = 800): ContentTransform {
      return (slideInVertically(animationSpec = tween(durationMillis = duration)) { height -> height } + fadeIn(
          animationSpec = tween(durationMillis = duration)
      )).togetherWith(slideOutVertically(animationSpec = tween(durationMillis = duration)) { height -> -height } + fadeOut(
          animationSpec = tween(durationMillis = duration)
      ))
  }

  
  
•  Add this in mainactiity
  
   CounterSeconds()