Compose动画需求:仅应用启动时播放,返回及横竖屏切换时不触发
问题描述
我开发了一款包含ScreenA和ScreenB两个页面的应用,在ScreenA上实现了一个启动时触发的位移动画,代码如下:
val horizontalBias = remember { Animatable(0f) } val alignment by derivedStateOf { BiasAlignment.Horizontal(horizontalBias.value) } LaunchedEffect(key1 = 1) { horizontalBias.animateTo( targetValue = -1f, animationSpec = tween( durationMillis = durationMillis, delayMillis = delayMillis ) ) } Box(modifier = modifier) { Column( modifier = Modifier.fillMaxWidth(), horizontalAlignment = alignment) { ... } }
我希望该动画仅在应用首次启动时播放,从ScreenB返回ScreenA时不播放,同时设备横竖屏切换时也不播放。
补充内容
我找到一个可行的解决方案,但不确定是否合理,代码如下:
var horizontalBias by rememberSaveable { mutableStateOf(0f) } val horizontalAnimatable = remember { Animatable(horizontalBias) } val alignment by derivedStateOf { BiasAlignment.Horizontal(horizontalAnimatable.value) } LaunchedEffect(true) { if (horizontalBias > -1f) { horizontalAnimatable.animateTo( targetValue = -1f, animationSpec = tween( durationMillis = durationMillis, delayMillis = delayMillis ) ) horizontalBias = -1f } }
方案分析
你的这个解决方案是合理的,核心逻辑能满足需求,具体分析如下:
- 横竖屏切换不重复播放:通过
rememberSaveable保存horizontalBias的状态,横竖屏切换或进程临时回收重启时,状态不会丢失,避免动画因组件重建重复触发。 - 返回ScreenA不重复播放:动画执行完成后将
horizontalBias设为-1f,后续即使从ScreenB返回导致ScreenA重组,LaunchedEffect触发时判断条件不满足,动画不会再次执行。
优化建议
可以把逻辑调整得更直观,用布尔值直接记录动画是否已执行,避免浮点值判断的语义模糊:
// 用rememberSaveable持久化状态,明确记录动画是否已播放 val hasPlayedAnimation = rememberSaveable { mutableStateOf(false) } val horizontalAnimatable = remember { Animatable(0f) } val alignment by derivedStateOf { BiasAlignment.Horizontal(horizontalAnimatable.value) } LaunchedEffect(Unit) { if (!hasPlayedAnimation.value) { horizontalAnimatable.animateTo( targetValue = -1f, animationSpec = tween( durationMillis = durationMillis, delayMillis = delayMillis ) ) hasPlayedAnimation.value = true } }
内容的提问来源于stack exchange,提问作者user3884677
相关产品推荐
相关产品推荐

