当前位置：首页 > news >正文

HarmonyOS角落里的知识：一杯冰美式的时间 -- 之打字机

news 2025/7/10 10:02:56

一、前言

模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，本文将和大家探讨打字机效果的实现方式以及应用。Demo基于API12。

二、思路

拆分开来很简单，将字符串拆分，只需把要展示的文本进行切割，使用定时器不断追加文字即可。光标我们可以使用自带的TextArea来实现。

效果如下：

三、数据源

随便抄了一段文本：

     private targetTxt: string = `碧海青天夜夜心，闲云潭影日悠悠。花开堪折直须折，莫待无花空折枝。江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝。能不忆江南？松风吹解带，山月照弹琴。遥望洞庭山水翠，白银盘里一青螺。人生若只如初见，何事秋风悲画扇？浮生若梦，为欢几何？长风破浪会有时，直挂云帆济沧海。岁月不居，时节如流。人生天地间，若白驹过隙，忽然而已。愿逐月华流照君，千里共婵娟。 `

分割：

 aboutToAppear(): void {this.targetTxtArray = this.targetTxt.split("");}

准备一个@State变量，用于显示UI

 @State currentTxt: string = ""

四、TextArea

使用TextArea要面对的就是输入框是有焦点和事件以及配套的键盘的，同时又需要光标。如下：

 TextArea({text: this.currentTxt}).width("auto").height("auto").animation({ duration: 200, curve: Curve.Smooth }).focusable(true).defaultFocus(true).enableKeyboardOnFocus(false).fontColor("#fefae0").caretColor("#d4a373").backgroundColor("#ccd5ae").hitTestBehavior(HitTestMode.None)

使用focusable(true)、defaultFocus(true)来获取焦点，达到显示光标的效果。
enableKeyboardOnFocus(false) 用于限制它弹出键盘
hitTestBehavior(HitTestMode.None)则屏蔽了所有的事件

我们得到了一个干净的，有光标的，无法操作的输入框～

五、setInterval

显然需要一个定时器来间隔添加文字。

 @State currentProgress: number = 0@State inputStepChar: number = 1private inputTxt(step: number) {if (this.intervalId != -1) {clearInterval(this.intervalId)this.intervalId = -1}this.intervalId = setInterval(() => {if (this.currentProgress >= this.targetTxtArray.length - 1) {clearInterval(this.intervalId)break} else {this.currentTxt += this.targetTxtArray[++ this.currentProgress]}}, step)}

因为可能被多次调用，我们需要存一个定时器ID，在后续的触发中将定时器清除。

step就是输入的间隔了，也就是输入速度。

每间隔一次，就在数组中取一个字符串，直到取完。

六、删除

因为有输入，那就可以有删除，也很简单。反过来就行了～

  private removeTxt(step: number) {if (this.intervalId != -1) {clearInterval(this.intervalId)this.intervalId = -1}this.intervalId = setInterval(() => {if (this.currentProgress <= 0) {clearInterval(this.intervalId)} else {this.currentProgress--this.currentTxt = this.currentTxt.substring(0, this.currentTxt.length - 1);}}, step)}

每间隔一次，就在currentTxt中移除最后一个字符，并currentProgress递减，直到删完。

七、删除、添加多个

默认是一个个增加，一个个删除。多个的话，我们直接点。使用一个For循环，将原有的逻辑套进去就好了。

 private inputTxt(step: number) {if (this.intervalId != -1) {clearInterval(this.intervalId)this.intervalId = -1}this.intervalId = setInterval(() => {for (let index = 0; index < this.inputStepChar; index++) {if (this.currentProgress >= this.targetTxtArray.length - 1) {clearInterval(this.intervalId)break} else {this.currentTxt += this.targetTxtArray[++ this.currentProgress]}}}, step)}

inputStepChar就是每次改变的字符数了，想多少就多少。

八、最终代码

 let maxSpeed: number = 1000let minSpeed: number = 50let minStepChar: number = 1let maxStepChar: number = 10/*** @Des* @Author zyc* @Date 2024/5/30*/@Componentexport struct TypeWriterComponent {private targetTxt: string = `碧海青天夜夜心，闲云潭影日悠悠。花开堪折直须折，莫待无花空折枝。江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝。能不忆江南？松风吹解带，山月照弹琴。遥望洞庭山水翠，白银盘里一青螺。人生若只如初见，何事秋风悲画扇？浮生若梦，为欢几何？长风破浪会有时，直挂云帆济沧海。岁月不居，时节如流。人生天地间，若白驹过隙，忽然而已。愿逐月华流照君，千里共婵娟。 `private intervalId: number = -1private targetTxtArray: string[] = []private defInputSpeed: number = 200private defRemoveSpeed: number = 100@State inputStepChar: number = 1@State removeStepChar: number = 1@State currentProgress: number = 0@State currentTxt: string = ""@State inputSpeed: number = 0@State removeSpeed: number = 0aboutToAppear(): void {this.targetTxtArray = this.targetTxt.split("");this.defRemoveSpeed = Math.abs(this.defRemoveSpeed - maxSpeed) + minSpeedthis.defInputSpeed = Math.abs(this.defInputSpeed - maxSpeed) + minSpeedthis.removeSpeed = this.defRemoveSpeedthis.inputSpeed = this.defInputSpeed}private inputTxt(step: number) {if (this.intervalId != -1) {clearInterval(this.intervalId)this.intervalId = -1}this.intervalId = setInterval(() => {zfor (let index = 0; index < this.inputStepChar; index++) {if (this.currentProgress >= this.targetTxtArray.length - 1) {clearInterval(this.intervalId)break} else {this.currentTxt += this.targetTxtArray[++ this.currentProgress]}}}, step)}private removeTxt(step: number) {if (this.intervalId != -1) {clearInterval(this.intervalId)this.intervalId = -1}this.intervalId = setInterval(() => {for (let index = 0; index < this.removeStepChar; index++) {if (this.currentProgress <= 0) {clearInterval(this.intervalId)break} else {this.currentProgress--this.currentTxt = this.currentTxt.substring(0, this.currentTxt.length - 1);}}}, step)}build() {Column({ space: 10 }) {TextArea({text: this.currentTxt}).width("auto").height("auto").animation({ duration: 200, curve: Curve.Smooth }).focusable(true).defaultFocus(true).enableKeyboardOnFocus(false).fontColor("#fefae0").caretColor("#d4a373").backgroundColor("#ccd5ae").hitTestBehavior(HitTestMode.None)Blank()Row() {Text("输入长度：").fontColor(Color.Black)Slider({style: SliderStyle.InSet,value: 1,step: 1,min: minStepChar,max: maxStepChar,}).layoutWeight(1).showSteps(true).stepSize(3).showTips(true, `${this.inputStepChar}`).selectedColor("#f07167").trackColor("#fdfcdc").stepColor("#fed9b7").onChange(value => {this.inputStepChar = valuethis.inputTxt(this.inputSpeed)})}Row() {Text("删除长度：").fontColor(Color.Black)Slider({style: SliderStyle.InSet,value: 1,step: 1,min: minStepChar,max: maxStepChar,}).layoutWeight(1).showSteps(true).stepSize(3).showTips(true, `${this.removeStepChar}`).selectedColor("#77bfa3").trackColor("#edeec9").stepColor("#bfd8bd").onChange(value => {this.removeStepChar = valuethis.removeTxt(this.inputSpeed)})}Row() {Text("输入速度：").fontColor(Color.Black)Slider({style: SliderStyle.InSet,value: this.defInputSpeed,step: 50,min: minSpeed,max: maxSpeed,}).layoutWeight(1).showSteps(true).stepSize(3).showTips(true, `${this.inputSpeed}`).selectedColor("#588157").trackColor("#dad7cd").stepColor("#a3b18a").onChange(value => {this.inputSpeed = Math.abs(value - maxSpeed) + minSpeedthis.inputTxt(this.inputSpeed)})}Row() {Text("删除速度：").fontColor(Color.Black)Slider({style: SliderStyle.InSet,value: this.defRemoveSpeed,step: 50,min: minSpeed,max: maxSpeed,}).layoutWeight(1).showSteps(true).stepSize(3).showTips(true, `${this.removeSpeed}`).selectedColor("#ddb892").trackColor("#ede0d4").stepColor("#e6ccb2").onChange(value => {this.removeSpeed = Math.abs(value - maxSpeed) + minSpeedthis.removeTxt(this.removeSpeed)})}Row({ space: 30 }) {Button("输出").onClick(() => {this.inputTxt(this.inputSpeed)})Button("撤回").onClick(() => {this.removeTxt(this.removeSpeed)})}}.padding(horizontalBottom(20, 40)).size(matchSize)}}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

鸿蒙HarmonyOS Next全套学习资料←点击领取！（安全链接，放心点击）

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

鸿蒙（HarmonyOS NEXT）最新学习路线