Jetpack Compose Crossfade 只是 AnimateContent 的一个子集功能吗？

Question

从https://developer.android.com/jetpack/compose/animation，我了解到AnimatedContent我可以做一个简单的交叉淡入淡出，如下所示

fun MyFunction() {
    Column {
        var currentPage by remember { mutableStateOf("0") }
        AnimatedContent(targetState = currentPage,
            transitionSpec = {
                fadeIn(animationSpec = tween(150)) with
                        fadeOut(animationSpec = tween(150))
            }) { screen -> Text("Page $screen") }
        Button(onClick = {
            currentPage = (0..10).random().toString()
        }) {
            Text("Click Me")
        }
    }
}

不过后来我发现还有一个Crossfade功能，就可以用了。

fun MyFunction() {
    Column {
        var currentPage by remember { mutableStateOf("0") }
        Crossfade(targetState = currentPage) { screen ->
            Text("Page $screen")
        }
        Button(onClick = {
            currentPage = (0..10).random().toString()
        }) {
            Text("Click Me")
        }
    }
}

看起来Crossfade可能只是AnimateContent可以做的事情的一个子集。那是对的吗？如果没有，Crossfade可以做什么，这是不包括的AnimateContent？

Answer 1

是的，Crossfade只做其中的一部分AnimatedContent。

Crossfade是一个单一用途、因此易于使用的动画 API。我们预计它对于大多数人来说都是一个低摩擦的切入点。一旦您熟悉了 的心智模型Crossfade，将其延续下去就相对简单了AnimatedContent。同时，AnimatedContent还引入了从 进入/退出转换词汇，我们希望它也是从到 的AnimatedVisibility自然进展。AnimatedVisibilityAnimatedContent

此设计的目的是提供易于学习的动画原语，这些原语不仅可以作为 Compose 新手的起点，而且还可以作为人们可以在某个时刻进一步发展的更强大的 API 的构建块。:)