如何避免重组影响Jetpack Compose动画？MP3播放器卡顿问题

问题背景 #

开发MP3播放器时，动画因组件频繁重组出现冻结卡顿现象。每次PlaybackInfo状态更新，都会触发相关组合项重组，导致动画中断。

疑似问题代码 #

Flow定义部分

val playbackInfo: Flow<PlaybackInfo> = combine(
    audioPlaybackRepository.currentProgress,
    audioPlaybackRepository.currentDuration
) { progress, duration ->
    PlaybackInfo.TrackInfo(
        progress = if (duration != 0L) {
            progress.toFloat() / duration.toFloat()
        } else {
            0f
        },
        duration = duration.milliseconds,
    )
}

调用位置代码

val playbackInfo by 
mainScreenViewModel.playbackInfo.collectAsState(PlaybackInfo.Unknown)

fun BottomSheet(
    playbackInfoProvider: () -> PlaybackInfo
) {
    ...
    val progress = playbackInfoProvider().progress
    val sliderMutableInteractionSource = remember { MutableInteractionSource() }
    ...
    SeekBar(
        ...
    onValueChangedFinished = {
     ...
        val positionInMS = getPositionInMs(
            sliderPosition,
            playbackInfoProvider().duration.toLong(DurationUnit.MILLISECONDS),
        )
    },
    )

    // 受重组影响的动画区域
    Animation(
        modifier = Modifier.align(Alignment.Center)
            .padding(bottom = if (isWide) 10.dp else 100.dp)
            .offset(y = if (isWide) -80.dp else 0.dp)
            .fillMaxSize(if (isWide) 0.6f else 0.85f),
        isPlaying = isPlaying,
        albumImage = currentSong?.image,
    )
}

卡顿效果

解决方案 #

1. 降低PlaybackInfo的更新频率 #

currentProgress属于高频更新流（通常每秒多次），直接组合会导致playbackInfo频繁发射新值，触发大量重组。给进度流添加节流和去重操作：

val playbackInfo: Flow<PlaybackInfo> = combine(
    audioPlaybackRepository.currentProgress
        .sample(100L) // 限制为每100ms更新一次
        .distinctUntilChanged(), // 过滤重复值，避免无效更新
    audioPlaybackRepository.currentDuration.distinctUntilChanged()
) { progress, duration ->
    PlaybackInfo.TrackInfo(
        progress = if (duration != 0L) {
            progress.toFloat() / duration.toFloat()
        } else {
            0f
        },
        duration = duration.milliseconds,
    )
}

2. 隔离动画组件的重组范围 #

将动画组件的依赖项限制为仅与动画相关的状态（如isPlaying、albumImage），避免因playbackInfo更新触发重组：

// 用remember包装动画组件，仅当依赖项变化时才重组
val animatedAlbum = remember(isPlaying, currentSong?.image) {
    {
        Animation(
            modifier = Modifier.align(Alignment.Center)
                .padding(bottom = if (isWide) 10.dp else 100.dp)
                .offset(y = if (isWide) -80.dp else 0.dp)
                .fillMaxSize(if (isWide) 0.6f else 0.85f),
            isPlaying = isPlaying,
            albumImage = currentSong?.image,
        )
    }
}
animatedAlbum()

或者将动画逻辑封装到独立组件，内部用LaunchedEffect维护动画状态：

@Composable
fun AnimatedAlbumCover(isPlaying: Boolean, albumImage: Image?) {
    val rotationState by animateFloatAsState(
        targetValue = if (isPlaying) 360f else 0f,
        animationSpec = infiniteRepeatable(
            animation = tween(10000, easing = LinearEasing)
        )
    )
    Image(
        painter = rememberAsyncImagePainter(albumImage),
        contentDescription = "Album cover",
        modifier = Modifier.rotate(rotationState)
    )
}

3. 缓存PlaybackInfo的计算结果 #

在BottomSheet中使用derivedStateOf缓存进度、时长的读取结果，避免每次重组都重复读取状态：

val progress by remember {
    derivedStateOf { playbackInfoProvider().progress }
}
val duration by remember {
    derivedStateOf { playbackInfoProvider().duration }
}

4. 改用State替代Flow收集（可选） #

如果不需要全量Flow组合，可在ViewModel中用mutableStateOf维护PlaybackInfo，仅在必要时更新：

private val _playbackInfo = mutableStateOf<PlaybackInfo>(PlaybackInfo.Unknown)
val playbackInfo: State<PlaybackInfo> = _playbackInfo

init {
    viewModelScope.launch {
        audioPlaybackRepository.currentProgress
            .sample(100L)
            .distinctUntilChanged()
            .combine(audioPlaybackRepository.currentDuration.distinctUntilChanged()) { progress, duration ->
                PlaybackInfo.TrackInfo(
                    progress = if (duration != 0L) progress.toFloat() / duration.toFloat() else 0f,
                    duration = duration.milliseconds
                )
            }
            .collect { _playbackInfo.value = it }
    }
}

核心思路 #

通过降低高频状态更新频率、隔离动画组件的重组依赖、缓存状态计算结果三个方向，减少不必要的重组触发，避免动画因频繁重组出现卡顿。

内容的提问来源于stack exchange，提问作者darksky123