如何从Composable外部触发无状态变更的动画？

在Jetpack Compose中，确实可以不依赖状态变更来触发动画，下面是两种实用的方案，同时能解决你提到的初始自动执行动画的问题：

方案一：暴露触发函数给外部 #

通过rememberCoroutineScope获取协程作用域，让Composable向外部暴露一个触发动画的函数，外部持有该函数后可直接调用触发动画，完全不需要状态变更。

@Composable
fun AnimatableText(
    onProvideTrigger: (() -> Unit) -> Unit
) {
    // 初始alpha设为1f，避免Composable创建时自动执行动画
    val alpha = remember { Animatable(1f) }
    val scope = rememberCoroutineScope()

    // 仅在Composable初始化时把触发函数传给外部
    LaunchedEffect(Unit) {
        onProvideTrigger {
            scope.launch {
                alpha.snapTo(0f)
                alpha.animateTo(1f, animationSpec = tween(2000))
            }
        }
    }

    Text(
        text = "TEST",
        modifier = Modifier.alpha(alpha.value)
    )
}

使用方式 #

在父Composable中获取触发函数，通过按钮或其他外部信号调用：

@Composable
fun ParentScreen() {
    var triggerAnimation: (() -> Unit)? by remember { mutableStateOf(null) }

    AnimatableText(onProvideTrigger = { trigger ->
        triggerAnimation = trigger
    })

    Button(onClick = { triggerAnimation?.invoke() }) {
        Text("触发淡入动画")
    }
}

方案二：使用事件流传递触发信号 #

利用MutableSharedFlow作为事件通道，外部通过发送事件触发动画，适合需要多个地方触发动画的场景，同样无需状态变更。

@Composable
fun AnimatableText(animationEvents: MutableSharedFlow<Unit>) {
    val alpha = remember { Animatable(1f) }
    val scope = rememberCoroutineScope()

    // 监听事件流，收到事件时执行动画
    LaunchedEffect(Unit) {
        animationEvents.collect {
            scope.launch {
                alpha.snapTo(0f)
                alpha.animateTo(1f, animationSpec = tween(2000))
            }
        }
    }

    Text(
        text = "TEST",
        modifier = Modifier.alpha(alpha.value)
    )
}

使用方式 #

在父Composable中创建事件流，通过发送事件触发动画：

@Composable
fun ParentScreen() {
    val animationEvents = remember { MutableSharedFlow<Unit>() }
    val scope = rememberCoroutineScope()

    AnimatableText(animationEvents = animationEvents)

    Button(onClick = {
        scope.launch {
            animationEvents.emit(Unit)
        }
    }) {
        Text("触发淡入动画")
    }
}

这两种方案都完全不需要依赖状态变更来触发动画，同时通过将Animatable初始值设为1f，避免了Composable创建时自动执行动画的问题，满足你接收外部信号触发元素动画的需求。

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