feat: Add animations for the "Up next" text

This commit is contained in:
Nishant Mishra
2025-09-29 20:27:16 +05:30
parent 3252a3a8fa
commit bde823e0b5

View File

@@ -456,24 +456,58 @@ fun TimerScreen(
Column(horizontalAlignment = CenterHorizontally) { Column(horizontalAlignment = CenterHorizontally) {
Text(stringResource(R.string.up_next), style = typography.titleSmall) Text(stringResource(R.string.up_next), style = typography.titleSmall)
Text( AnimatedContent(
timerState.nextTimeStr, timerState.nextTimeStr,
style = TextStyle( transitionSpec = {
fontFamily = openRundeClock, slideInVertically(
fontWeight = FontWeight.Bold, animationSpec = motionScheme.defaultSpatialSpec(),
fontSize = 22.sp, initialOffsetY = { (-it * 1.25).toInt() }
lineHeight = 28.sp, ).togetherWith(
color = if (timerState.nextTimerMode == TimerMode.FOCUS) colorScheme.primary else colorScheme.tertiary slideOutVertically(
animationSpec = motionScheme.defaultSpatialSpec(),
targetOffsetY = { (it * 1.25).toInt() }
)
)
}
) {
Text(
it,
style = TextStyle(
fontFamily = openRundeClock,
fontWeight = FontWeight.Bold,
fontSize = 22.sp,
lineHeight = 28.sp,
color = if (timerState.nextTimerMode == TimerMode.FOCUS) colorScheme.primary else colorScheme.tertiary,
textAlign = TextAlign.Center
),
modifier = Modifier.width(200.dp)
) )
) }
Text( AnimatedContent(
when (timerState.nextTimerMode) { timerState.nextTimerMode,
TimerMode.FOCUS -> stringResource(R.string.focus) transitionSpec = {
TimerMode.SHORT_BREAK -> stringResource(R.string.short_break) slideInVertically(
else -> stringResource(R.string.long_break) animationSpec = motionScheme.defaultSpatialSpec(),
}, initialOffsetY = { (-it * 1.25).toInt() }
style = typography.titleMediumEmphasized ).togetherWith(
) slideOutVertically(
animationSpec = motionScheme.defaultSpatialSpec(),
targetOffsetY = { (it * 1.25).toInt() }
)
)
}
) {
Text(
when (it) {
TimerMode.FOCUS -> stringResource(R.string.focus)
TimerMode.SHORT_BREAK -> stringResource(R.string.short_break)
else -> stringResource(R.string.long_break)
},
style = typography.titleMediumEmphasized,
textAlign = TextAlign.Center,
modifier = Modifier.width(200.dp)
)
}
} }
} }
} }