You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Jetpack Compose中控制AnimatedVisibility的动画方向?

Compose AnimatedVisibility 实现指定方向滑入滑出

要实现从下到上滑入、从上到下滑出的效果,只需给 slideInVertically() 和 slideOutVertically() 传入对应的偏移量参数即可:

  • slideInVertically(initialOffsetY = { it }):initialOffsetY 定义动画起始的垂直偏移量,it 指代当前组件自身的高度,设为 it 意味着组件初始处于屏幕底部(自身高度的位置),随后向上滑入到正常显示位置。
  • slideOutVertically(targetOffsetY = { -it }):targetOffsetY 定义动画结束时的垂直偏移量,-it 表示组件最终会移动到自身高度的负方向(屏幕顶部上方),也就是从上往下滑出视野。

修改后的完整代码如下:

AnimatedVisibility(
    visible = state.value,
    enter = slideInVertically(initialOffsetY = { it }),
    exit = slideOutVertically(targetOffsetY = { -it })
) {
    // 你的组件内容
}

如果需要调整动画速度或曲线,还可以额外传入 animationSpec 参数自定义,示例:

enter = slideInVertically(
    initialOffsetY = { it },
    animationSpec = tween(durationMillis = 500, easing = FastOutSlowInEasing)
)

内容的提问来源于stack exchange,提问作者Mr.jone

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.20 10:27:24