KMP(Kotlin Multiplatform)简单动画

泓博2025-06-18 17:51

一、背景

在界面开发过程中，会有很多根据条件显示隐藏View的过程，而直接显示隐藏显得比较生硬，采用KMP提供的动画组件可以很轻松的把交互过程变得更加流畅丝滑。

需求：在服务卡片中，点击可选服务，把卡片撑大，显示出更多内容。

使用渐变或者位移都不能很好实现，而KMP提供的滑动动画满足了需求。

二、实现过程

2.1 AnimatedVisibility用法

首先看AnimatedVisibility的源码，如下

复制代码 
@Composable
public fun ColumnScope.AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandVertically(),
    exit: ExitTransition = fadeOut() + shrinkVertically(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
) {
    val transition = updateTransition(visible, label)
    AnimatedVisibilityImpl(transition, { it }, modifier, enter, exit, content = content)
}

其中，最主要关注3个参数，visible是控制内容显示隐藏，enter是显示的动画，exit是退出的动画。

默认enter的动画是fadeIn() + expandVertically()，也就是渐渐显示+扩大展开。

默认exit的动画是fadeOut() + shrinkVertically()，也就是渐渐隐藏+收缩关闭。

但尝试后，动画并不能满足诉求，于是对每一种动画做了尝试，最后发现slide动画结合使用满足了需求。

复制代码 
AnimatedVisibility(
    showContent,
    enter = slideInVertically() + expandVertically(),
    exit = slideOutVertically() + shrinkVertically()
) {
    Column(modifier = Modifier.padding(bottom = 12.dp)) {
      【此处省略详细布局代码】
    }
}

把展开显示的布局写入AnimatedVisibility中接口。

2.2 事件处理

首先在Compose函数中声明显示隐藏变量

复制代码 
var showContent by remember { mutableStateOf(false) }

在需要触发展开的布局上添加点击事件

复制代码 
text = "可选服务(4)", style = TextStyle(
    fontSize = 12.sp,
    lineHeight = 16.sp,
    fontWeight = FontWeight(300),
    color = Color(0xFF8C8C8C),
), modifier = Modifier.clickable(
    interactionSource = remember { MutableInteractionSource() }, indication = null
) {
    showContent = !showContent
}.padding(vertical = 12.dp).fillMaxWidth()

如下在clickable事件中，改变showContent的值就可以控制AnimatedVisibility显示隐藏。

注解：这里clickable添加了interactionSource是为了去除点击的水波纹效果。

2.3 完整代码

复制代码 
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeContentPadding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Checkbox
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kmpcappdidi.composeapp.generated.resources.Res
import kmpcappdidi.composeapp.generated.resources.ic_icon_help
import kmpcappdidi.composeapp.generated.resources.ic_icon_number_jia
import kmpcappdidi.composeapp.generated.resources.ic_icon_number_jian
import kmpcappdidi.composeapp.generated.resources.ic_icon_server_old
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview

@Composable
@Preview
fun App() {
    MaterialTheme {
        Column(
            modifier = Modifier.safeContentPadding().fillMaxSize()
                .background(color = Color(0xFFF5F5F5)),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            ServerCardOld()
        }
    }
}

@Composable
fun ServerCardOld() {
    var showContent by remember { mutableStateOf(false) }
    Column(
        modifier = Modifier.padding(16.dp).background(
            color = Color(0xFFFFFFFF), shape = RoundedCornerShape(size = 4.dp)
        ).padding(horizontal = 16.dp)
    ) {
        Row(modifier = Modifier.padding(top = 12.dp)) {
            Image(
                painter = painterResource(Res.drawable.ic_icon_server_old),
                contentDescription = "image description",
                contentScale = ContentScale.None
            )
            Column(modifier = Modifier.padding(start = 12.dp)) {
                Text(
                    text = "有老人", style = TextStyle(
                        fontSize = 13.sp,
                        lineHeight = 16.sp,
                        fontWeight = FontWeight(500),
                        color = Color(0xFF262626),
                    )
                )

                Text(
                    text = "机场到达口中文举牌接您", style = TextStyle(
                        fontSize = 12.sp,
                        lineHeight = 16.sp,
                        fontWeight = FontWeight(300),
                        color = Color(0xFF8C8C8C),
                    ), modifier = Modifier.padding(top = 8.dp)
                )

                Text(
                    text = "可提供基础的讲解服务", style = TextStyle(
                        fontSize = 10.sp,
                        lineHeight = 12.sp,
                        fontWeight = FontWeight(300),
                        color = Color(0xFF595959),
                    ), modifier = Modifier.padding(top = 6.dp)
                )
            }

            Spacer(modifier = Modifier.weight(1f))

            Text(
                text = "免费", style = TextStyle(
                    fontSize = 11.sp,
                    lineHeight = 13.sp,
                    fontWeight = FontWeight(300),
                    color = Color(0xFF8C8C8C),
                )
            )
        }
        HorizontalDivider(
            modifier = Modifier.padding(top = 12.dp).height(0.5.dp).background(Color(0xFFF0F0F0))
        )

        Text(
            text = "可选服务(4)", style = TextStyle(
                fontSize = 12.sp,
                lineHeight = 16.sp,
                fontWeight = FontWeight(300),
                color = Color(0xFF8C8C8C),
            ), modifier = Modifier.clickable(
                interactionSource = remember { MutableInteractionSource() }, indication = null
            ) {
                showContent = !showContent
            }.padding(vertical = 12.dp).fillMaxWidth()
        )

        AnimatedVisibility(
            showContent,
            enter = slideInVertically() + expandVertically(),
            exit = slideOutVertically() + shrinkVertically()
        ) {
            Column(modifier = Modifier.padding(bottom = 12.dp)) {
                Row(
                    horizontalArrangement = Arrangement.Start,
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.fillMaxWidth().background(
                        color = Color(0xFFFAFAFA), shape = RoundedCornerShape(size = 4.dp)
                    ).padding(start = 8.dp, top = 8.dp, end = 8.dp, bottom = 8.dp)
                ) {
                    Text(
                        text = "随车轮椅", style = TextStyle(
                            fontSize = 12.sp,
                            lineHeight = 16.sp,
                            fontWeight = FontWeight(400),
                            color = Color(0xFF000000),
                        )
                    )

                    Image(
                        painter = painterResource(Res.drawable.ic_icon_help),
                        contentDescription = "image description",
                        contentScale = ContentScale.None,
                        modifier = Modifier.padding(start = 4.dp)
                    )

                    Text(
                        text = "由可提供的向导报价", style = TextStyle(
                            fontSize = 9.sp,
                            lineHeight = 11.sp,
                            fontWeight = FontWeight(300),
                            color = Color(0xFF8C8C8C),
                        ), modifier = Modifier.padding(start = 4.dp)
                    )

                    Spacer(modifier = Modifier.weight(1f))

                    HNumberInput()
                }

                Row(
                    horizontalArrangement = Arrangement.Start,
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(top = 6.dp).fillMaxWidth().background(
                        color = Color(0xFFFAFAFA), shape = RoundedCornerShape(size = 4.dp)
                    ).padding(start = 8.dp, top = 8.dp, end = 8.dp, bottom = 8.dp)
                ) {
                    Text(
                        text = "帮带温水", style = TextStyle(
                            fontSize = 12.sp,
                            lineHeight = 16.sp,
                            fontWeight = FontWeight(400),
                            color = Color(0xFF000000),
                        )
                    )

                    Image(
                        painter = painterResource(Res.drawable.ic_icon_help),
                        contentDescription = "image description",
                        contentScale = ContentScale.None,
                        modifier = Modifier.padding(start = 4.dp)
                    )

                    Spacer(modifier = Modifier.weight(1f))

                    Checkbox(checked = false, onCheckedChange = {

                    }, modifier = Modifier.padding(end = 8.dp).height(14.dp).width(14.dp))
                }

                Row(
                    horizontalArrangement = Arrangement.Start,
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(top = 6.dp).fillMaxWidth().background(
                        color = Color(0xFFFAFAFA), shape = RoundedCornerShape(size = 4.dp)
                    ).padding(start = 8.dp, top = 8.dp, end = 8.dp, bottom = 8.dp)
                ) {
                    Text(
                        text = "下车陪同老人游览", style = TextStyle(
                            fontSize = 12.sp,
                            lineHeight = 16.sp,
                            fontWeight = FontWeight(400),
                            color = Color(0xFF000000),
                        )
                    )

                    Image(
                        painter = painterResource(Res.drawable.ic_icon_help),
                        contentDescription = "image description",
                        contentScale = ContentScale.None,
                        modifier = Modifier.padding(start = 4.dp)
                    )

                    Spacer(modifier = Modifier.weight(1f))

                    Checkbox(checked = false, onCheckedChange = {

                    }, modifier = Modifier.padding(end = 8.dp).height(14.dp).width(14.dp))
                }
            }

        }
    }
}

@Composable
fun HNumberInput() {
    val num = remember { mutableStateOf(0) }
    Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.height(20.dp)) {
        IconButton(onClick = {
            num.value--
        }) {
            Image(
                painter = painterResource(Res.drawable.ic_icon_number_jian),
                contentDescription = "image description",
                contentScale = ContentScale.None
            )
        }

        Text(
            "${num.value}", style = TextStyle(
                fontSize = 14.sp,
                lineHeight = 16.sp,
                fontWeight = FontWeight(500),
                color = Color(0xFF262626),
                textAlign = TextAlign.Center,
            )
        )

        IconButton(onClick = {
            num.value++
        }) {
            Image(
                painter = painterResource(Res.drawable.ic_icon_number_jia),
                contentDescription = "image description",
                contentScale = ContentScale.None
            )
        }
    }
}
相关推荐
37手游移动客户端团队11 小时前
招聘-高级安卓开发工程师
android·客户端
用户416596736935511 小时前
WebView 请求异常排查操作手册
android·前端
Kapaseker12 小时前
学不动了，入门 Compose Styles API
android·kotlin
墨狂之逸才1 天前
Android TV WebView 遥控器按键处理：从全透传到白名单
android
plainGeekDev1 天前
MVC 写法 → MVVM
android·java·kotlin
恋猫de小郭1 天前
Flutter Patchwork，不用 Fork 改依赖包源码的第三方工具
android·前端·flutter
三少爷的鞋2 天前
“结构化”这个词，本质上就是——把混乱的东西变成有组织、有规则、有边界的东西
android
方白羽2 天前
Android Gradle 缓存与文件目录深度解析
android·gradle·android studio
曲幽2 天前
Termux里的二进制和脚本，到底怎么运行才不踩坑？Termux-service 保活妙招！
android·termux·nohup·services·wake-lock
plainGeekDev2 天前
单例模式 → object 声明
android·java·kotlin
热门推荐
012026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？022026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析06飞书长连接_事件订阅（接收消息，审批任务状态变更）07GitHub 镜像站点08Trae国际版与国内版深度测评：AI原生IDE的双生花09【AI总结】2026年6月 主流国内外大模型总结10AI科技热点日报 | 2026年6月1日