Jetpack Compose 动画正式开始学习

最新推荐文章于 2024-09-05 10:20:04 发布

荭色海湾

最新推荐文章于 2024-09-05 10:20:04 发布

阅读量634

点赞数 8

CC 4.0 BY-SA版权

分类专栏： Androd Jetpack Compose 文章标签：学习

本文链接：https://blog.youkuaiyun.com/qq_53374893/article/details/136651858

1. 简单值动画

   //将一个Color简单值 从一个值 变化到另一个 另一个简单值 就用 animateColorAsState
    val backgroundColor by animateColorAsState(if (tabPage == TabPage.Home) Purple100 else Green300)

动画其实就是一个状态不停发生改变导致组件不断重组产生的过程

2. 可见性动画

2.1 按钮展开收缩

LazyColumn

val lazyListState = rememberLazyListState()

/**
 * Returns whether the lazy list is currently scrolling up.
 * 返回LazyColumn是否 当前向上滚动
 */
@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
}

     // Toggle the visibility of the content with animation.
            AnimatedVisibility(visible = extended) {
                Text(
                    text = stringResource(R.string.edit),
                    modifier = Modifier
                        .padding(start = 8.dp, top = 3.dp)
                )
            }

可见性动画 AnimatedVisibility

2.2 消息从顶部滑入和滑出

@Composable
private fun EditMessage(shown: Boolean) {

    Log.d("ning","".plus(shown))
    AnimatedVisibility(
        visible = shown,
        //垂直出来
        enter = slideInVertically(
            // 通过从 initialOffsetY 向下滑动到 0 来进入
            initialOffsetY = { fullHeight -> fullHeight },
            //这里要传入一个带参数的函数，返回的是你需要告诉动画系统控件初始位置或结束位置，参数是动画系统告诉你的控件的高度
            //LinearOutSlowInEasing:传入元素使用减速缓和设置动画，减速缓和以峰值速度（元素移动的最快点）开始过渡 , 慢慢减速 ，直到停止
            animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing)//帧动画
        ),
        //垂直回去
        exit = slideOutVertically(
            // 通过从 initialOffsetY 向上滑动到 targetOffsetY 来退出
            targetOffsetY = { fullHeight -> -fullHeight },
            //FastOutLinearInEasing ：退出屏幕的元素使用加速度缓和，从静止开始，以峰值速度结束