Compose-Animation高级别动画

前言

AnimatedVisibility 驱动可视性相关动画，即布局显隐
animateContentSize 内容变换动画相关
Crossfade 布局（或者页面）切换过渡动画

AnimatedVisibility

需求：插入 FAB(浮动按钮)到 scaffold 布局内，我们需要当列表向下滑动时 FAB 自动收起，向上滑动时展开

完整实现流程：

1. scaffold 定义状态，检测 lazycolumn 滚动方向
2. 根据滚动方向来动态指定 extend 变量是否为 true
3. 将 extend 变量传递给 FAB 函数，动态显隐文本
4. 结束

isScrollingUp

再开始工作之前，需要为 LazyListState 自己编写一个扩展方法 isScrollingUp，用来检测当前滚动方向

@Composable
private fun LazyListState.isScrollingUp(): Boolean {
   
   
    var previousIndex by remember(this) {
   
    mutableStateOf(firstVisibleItemIndex) }
    var previousScrollOffset by remember(this) {
   
    mutableStateOf(firstVisibleItemScrollOffset) }
    return remember(this) {
   
   
        derivedStateOf {
   
   
            if (previousIndex != firstVisibleItemIndex) {
   
   
                previousIndex > firstVisibleItemIndex
            } else {
   
   
                previousScrollOffset >= firstVisibleItemScrollOffset
            }.also {
   
   
                previousIndex = firstVisibleItemIndex
                previousScrollOffset = firstVisibleItemScrollOffset
            }
        }
    }.value
}

FAB

定义一个 FAB 组件，使用 FloatingActionButton 可以便于自定义

AnimatedVisibility 函数可以使得组件显隐过渡平滑，且能根据 API 自定义显隐过程的持续时间以及过程
最简单的使用方法是将其包裹你想要动态显隐的组件，并使用 visible 属性控制显隐

@Composable
private fun HomeFloatingActionButton(
    // 是否显隐，由上级scaffold定义
    extended: Boolean,
    onClick: () -> Unit