英文:
Compose Custom Progress Animation With Pause/Resume
问题
我想制作一个带有暂停和播放功能的进度条，就像这样。
如何使用Compose获得这种效果？
我尝试了很多动画，但无法处理开始/停止操作。有什么最优雅的方法可以做到这一点？
英文:
I want to make a progress bar with pause and play, like this.
How can I got this output with compose ?
I tried a lot of animations but couldn't handle with the start/stop operations. What is the most elegant way to do this?
答案1
得分: 1
这是我认为最简单的方法：
val progress by remember { mutableStateOf(0f) }
val animatedProgress by animateFloatAsState(targetValue = progress,
animationSpec = tween(
durationMillis = 1000,
easing = LinearEasing
))
val paused by remember { mutableStateOf(false) }
LaunchedEffect(paused) {
if (!paused) while (progress < 1f) {
progress += 0.1f // 或者其他步进值
delay(1000) // 或者其他延迟值
}
}
在这里甚至不需要使用动画，你可以直接将 progress 的值应用为组件的尺寸分数。
animatedProgress 会动画到目标值，这在这个解决方案中是“可暂停的”。因此，当目标值不变时，动画会停止。
英文:
The easiest way is this one I think:
val progress by remember { mutableStateOf(0f) }
val animatedProgress by animateFloatAsState(targetValue = progress,
animationSpec = tween(
durationMillis = 1000,
easing = LinearEasing
))
val paused by remember { mutableStateOf(false) }
LaunchedEffect(paused) {
if (!paused) while (progress < 1f) {
progress += 0.1f //or another step
delay(1000) //or another delay
}
}
Here it is not even necessary to use animation, you can directly apply the progress value as a component's size fraction.
animatedProgress animates to target value, which is "pausable" in this solution. So when the target value doesn't change, the animation stops
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论