@Composable
fun SlideInAnimationScreen() {
// I'm using the same duration for all animations.
val animationTime = 300
// This state is controlling if the second screen is being displayed or not
var showScreen2 by remember { mutableStateOf(false) }
// This is just to give that dark effect when the first screen is closed...
val color = animateColorAsState(
targetValue = if (showScreen2) Color.DarkGray else Color.Red,
animationSpec = tween(
durationMillis = animationTime,
easing = LinearEasing
)
)
Box(Modifier.fillMaxSize()) {
// Both Screen1 and Screen2 are declared here...
}
}
5条答案
按热度按时间cl25kdpy1#
正如你提到的,这个动画应该由导航库实现,有a ticket opened to that。
考虑到这一点,我在这里留下我的答案,希望它能帮助你。
我把它分成三部分:
1.容器:
字符串
1.第一个屏幕只是做一个小幻灯片,以创建视差效果。我也改变了背景颜色从红色到黑暗只是为了给予这个重叠/隐藏/黑暗的效果。
型
1.第二个是真正的从边缘滑动。
型
结果如下:
x1c 0d1x的数据
e5njpo682#
在深入研究了CrossFade的代码之后,我为十字幻灯片实现了一个类似的代码,当按下backButton时,它可以启用反向动画
这是:https://gist.github.com/DavidIbrahim/5f4c0387b571f657f4de976822c2a225
使用示例
字符串
0s0u357o3#
现在我们有了一个官方的解决方案。最近Google Accompanist添加了一个库,为Jetpack Navigation Compose提供了Compose Animation支持。
https://github.com/google/accompanist/tree/main/navigation-animation的
nuypyhwy4#
这是一个基于@nglauber解决方案的集成解决方案,它提供了视图滑动独立于视图背景的错觉。
x1c 0d1x的数据
演示部分-
字符串
代码部分-
型
ny6fqffe5#
到目前为止,我们还没有任何东西可以与Compose中的
Activity
Transitions相媲美。Jetpack应该在他们身上工作,我希望。大量的转换API要么是internal
,要么是private
,所以实现一个好的API更难。如果用于生产,请使用
Activity/Fragment
与导航主机。如果没有,使用AnimatedVisibility
在没有导航组件的情况下滑动。https://issuetracker.google.com/issues/172112072