前言

上篇文章 嘿嘿。又少了一个不用Compose的理由~官方支持跑马灯作用了！ – ()，有位jy留言说想看看用Compose完成一个打字机的作用，我也用一个承诺换来了他的重视。正好我五一前离任了，经过小长假的调整后，今日正式开端交作业。

打字机作用

所谓打字机作用其实大致是由两个作用组成而来。逐字输出+底部横向下划线或许同字高的竖向划线光标。

逐字输出

这个作用用咱们利用Compose智能重组的特点来完成非常简略。

@Composable
fun Typewriter(
    fixedText: String,//默许显现的文字
    animatedText: String,//需求打字机作用的文字
) {
    //组合项内管理需求打字机作用的文字状况
    var _animatedText by remember { mutableStateOf("") }
    //申明最终需求在Text组合项显现的文字变量
    val textToDisplay = "$fixedText$_animatedText"
    LaunchedEffect(key1 = animatedText) {
        animatedText.forEachIndexed { charIndex, _ ->
            //遍历中赋值组合项管理的文字状况（延迟200毫秒后逐个新增字符后从头赋值）
            _animatedText = animatedText.substring(startIndex = 0, endIndex = charIndex + 1)
            delay(200)
        }
    }
    //_animatedText改动,textToDisplay跟着改动，textToDisplay改动后，作为Text组合项的参数，导致Text组合项触发重组。
    Text(
        text = textToDisplay,
        style = TextStyle(
            fontWeight = FontWeight.SemiBold,
            fontSize = 40.sp,
            letterSpacing = -(1.6).sp,
            lineHeight = 52.sp,
            color = Color.White,
        ),
    )
}
val animatePartsList = remember {
    "山不在高,有仙则名.水不在深,有龙则灵."
}
Typewriter(
    "小时候叔叔对我说:", animatePartsList,
)

咱们来看看作用

To Dear 兮尘同学-Compose实现简单的打字机效果

经过Compose的重组特性，咱们能够非常简略的完成这个逐字显现的动画！

光标

鲁迅说过，没有光标的打字机作用是没有灵魂的！完成光标前，先整理一下思路。

  1. 需求指定两种样式（底部下划线样式，右侧竖向光标样式）

  2. 光标在开端的时候顶头，一旦有字打印出来后需求在最后一个显现的字的右侧显现，一切字打印完毕需求隐藏光标。

  • 赖人方法
@Composable
fun Typewriter(
    fixedText: String,
    animatedText: String,
    orientation: Orientation=Orientation.Horizontal
) {
    var _animatedText by remember { mutableStateOf("") }
    val textToDisplay = "$fixedText$_animatedText"
    LaunchedEffect(key1 = animatedText) {
        animatedText.forEachIndexed { charIndex, _ ->
            _animatedText = animatedText.substring(startIndex = 0, endIndex = charIndex + 1)
            delay(200)
            //直接经过拼接方法在200毫秒内改动显现字符串的内容
            if (charIndex+1<animatedText.length){
                _animatedText += when (orientation) {
                    Orientation.Vertical -> "|"
                    Orientation.Horizontal -> "_"
                }
                delay(100)
            }
        }
    }
    Text(
        text = textToDisplay,
        style = TextStyle(
            fontWeight = FontWeight.SemiBold,
            fontSize = 40.sp,
            letterSpacing = -(1.6).sp,
            lineHeight = 52.sp,
            color = Color.White,
        ),
    )
}
val animatePartsList = remember {
    "山不在高,有仙则名.水不在深,有龙则灵."
}
Typewriter(
    "小时候叔叔对我说:", animatePartsList,Orientation.Vertical
)

加上光标作用后，逼格登时进步几个层次！
横向

To Dear 兮尘同学-Compose实现简单的打字机效果
竖向
To Dear 兮尘同学-Compose实现简单的打字机效果

  • 自定义绘制
    上面的赖人的方法有取巧的嫌疑哈！不过够快够野。可是假如咱们要完成更高定制的作用那就需求涉及到自定义绘制的常识了。所以我觉得正好能够利用这个作用来和大家一同初探一下Compose的自定义绘制的相关内容。感觉内容会比较多，所以会另开一篇再来接着这篇讲。

小结

首先感谢兮尘引出的这篇文章，没有你的留言。我也不会想到完成这个打字机作用，也不会有今日这篇文章。最要害的是，在完成的过程中确实对Compose的快捷和强大有了新的知道。等待往后的日子能跟更多的xdm一同碰撞火花，共同进步！