Jetpack Compose Animation with LinearEasing not working properly with Talkback

99 Views Asked by At

I am using the following code to display a clock animation for the polling interval, but when I turn on TalkBack, the screen gets stuck and all gesture navigation stops working. Can anyone help me find the issue in the below code?

If you comment out the LinearEasing, the gesture navigation will work fine when TalkBack

trying to implement something similar to this

@Composable
fun AnimatedTimer(time: String, pollingInterval: Int) {
   val scope = rememberCoroutineScope()
   var timeSaved by remember { mutableStateOf("") }
   var progression by remember { mutableStateOf(0f) }
   var opacity by remember { mutableStateOf(1f) }
   val opacityDuration = 500
   val job = {
       scope.launch {
           animate(
               initialValue = 0.0f, targetValue = 1.1f,
               animationSpec = repeatable(
                   1,
                   tween(
                       durationMillis = pollingInterval,
                       **easing = LinearEasing,**
                   )
               )
           ) { value: Float, _: Float -> progression = value }
       }
       scope.launch {
           animate(
               initialValue = 1.0f, targetValue = 0f,
               animationSpec = repeatable(
                   1,
                   tween(
                       delayMillis = pollingInterval - opacityDuration,
                       durationMillis = opacityDuration,
                       **easing = LinearEasing,**
                   )
               )
           ) { value: Float, _: Float -> opacity = value }
       }
   }
   SideEffect {
       if (timeSaved != time) {
           job().start()
           timeSaved = time
       }
   }
    Box(modifier = Modifier.size(20.dp)) {
       CircularProgressIndicator(
           modifier = Modifier
               .fillMaxSize()
               .alpha(opacity)
               .padding(horizontal = 3.dp)
               .offset(x = (-0.4).dp, y = 5.dp),
           progress = progression,
           color = battleshipGrey,
           strokeWidth = 8.dp
       )
        Image(
            modifier = Modifier.fillMaxSize(),
            painter = painterResource(id = R.drawable.ic_timer_hollow),
            contentDescription = null,
        )
    }
}

ic_timer_hollow.xml

<vector android:autoMirrored="true" android:height="20dp"
    android:viewportHeight="20" android:viewportWidth="18"
    android:width="18dp" xmlns:android="http://schemas.android.com/apk/res/android">
  <path android:fillColor="#BAC2C7" android:pathData="M7.838,2.014L9.853,2.014 9.853,4.892 7.838,4.892z"/>
  <path android:fillColor="#BAC2C7" android:pathData="M8.845,3.31c4.61,0 8.346,3.736 8.346,8.345S13.454,20 8.845,20 0.5,16.264 0.5,11.655c0,-4.61 3.736,-8.346 8.345,-8.346zM8.845,5.036c-3.576,0 -6.474,2.899 -6.474,6.475 0,3.576 2.898,6.475 6.474,6.475s6.475,-2.9 6.475,-6.475c0,-3.576 -2.899,-6.475 -6.475,-6.475zM6.83,0.573v1.3c0,0.237 0.188,0.43 0.418,0.43h3.338c0.23,0 0.418,-0.193 0.418,-0.43v-1.3c0,-0.237 -0.187,-0.43 -0.418,-0.43L7.248,0.143c-0.23,0 -0.417,0.193 -0.417,0.43z"/>
  <path android:fillColor="#BAC2C7" android:pathData="M10.585,0.127L8.99,0.127v2.158h1.596c0.231,0 0.419,-0.192 0.419,-0.429v-1.3c0,-0.237 -0.188,-0.43 -0.419,-0.43z"/>
  <path android:fillColor="#627580" android:pathData="M8.917,11.583m-1.223,0a1.223,1.223 0,1 1,2.446 0a1.223,1.223 0,1 1,-2.446 0"/>
</vector>
0

There are 0 best solutions below