是否可以使可组合项在活动启动时出现动画？

Question

我想让 UI 的某些部分在活动启动时显示动画。例如，如果我的活动 onCreate

 看起来像：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        AppTheme{
            // A surface container using the 'background' color from the theme
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background
            ) {
                Text(text = "Message")
            }
        }
    }

如何使文本以动画淡入淡出的方式出现？大多数 Jetpack Compose 动画需要可以通过执行某些活动（例如点击按钮）来更改的状态。

我尝试使用

AnimatedVisibility

 并将参数设置为 

true

，但这没有给出动画，就好像没有 

AnimatedVisibility

 一样。

Answer 1

你可以尝试这个代码块：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        /*MainView()*/
        setContent {
            var visible by remember {
                mutableStateOf(false)
            }
            LaunchedEffect(key1 = Unit, block = {
                delay(600L)
                visible = true
            })
            AnimatedVisibility(
                visible = visible, modifier = Modifier.fillMaxSize(),
                enter = fadeIn(initialAlpha = 0.0f) + slideInVertically(
                    tween(
                        durationMillis = 600,
                        delayMillis = 600,
                        easing = FastOutSlowInEasing
                    ),
                    initialOffsetY = { it * 6 }
                )

            ) {
                Text(
                    text = "Message",
                    modifier = Modifier.fillMaxSize(),
                    textAlign = TextAlign.Center,
                    fontSize = 20.sp
                )
            }
        }
    }
}

注意：AnimatedVisibility 对简单的布尔值做出反应。因此，最好提供布尔值，该值是 AnimatedVisibility 的可见参数中的状态已知变量。

Answer 2

这只是 Megh 提供的上述解决方案的扩展，所有功劳都归于 Megh...

当我反复这样做时，我将其包裹起来以使其可重复使用。

@Composable
internal fun InitialFadeIn(durationMs: Int = 1000, content: @Composable() AnimatedVisibilityScope.() -> Unit) {
    var visibility by remember { mutableStateOf(false) }
    LaunchedEffect(key1 = Unit, block = { visibility = true })
    AnimatedVisibility(visible = visibility, enter = fadeIn(tween(durationMs)), content = content)
}

注：

我完全消除了延迟，因为我不想有任何额外的延迟
我测试了它，它似乎可以在多个不同的设备上运行，所以希望它没问题