一、前言
模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，本文将和大家探讨打字机效果的实现方式以及应用。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 = 1
private 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 = 1000
let minSpeed: number = 50
let minStepChar: number = 1
let maxStepChar: number = 10
/**
* @Des
* @Author zyc
* @Date 2024/5/30
*/
@Component
export struct TypeWriterComponent {
private targetTxt: string = `碧海青天夜夜心，闲云潭影日悠悠。
花开堪折直须折，莫待无花空折枝。
江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝。能不忆江南？
松风吹解带，山月照弹琴。
遥望洞庭山水翠，白银盘里一青螺。
人生若只如初见，何事秋风悲画扇？
浮生若梦，为欢几何？
长风破浪会有时，直挂云帆济沧海。
岁月不居，时节如流。人生天地间，若白驹过隙，忽然而已。
愿逐月华流照君，千里共婵娟。 `
private intervalId: number = -1
private targetTxtArray: string[] = []
private defInputSpeed: number = 200
private 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 = 0
aboutToAppear(): void {
this.targetTxtArray = this.targetTxt.split("");
this.defRemoveSpeed = Math.abs(this.defRemoveSpeed - maxSpeed) + minSpeed
this.defInputSpeed = Math.abs(this.defInputSpeed - maxSpeed) + minSpeed
this.removeSpeed = this.defRemoveSpeed
this.inputSpeed = this.defInputSpeed
}
private inputTxt(step: number) {
if (this.intervalId != -1) {
clearInterval(this.intervalId)
this.intervalId = -1
}
this.intervalId = setInterval(() => {z
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)
}
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 = value
this.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 = value
this.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) + minSpeed
this.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) + minSpeed
this.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）最新学习路线
有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
HarmonyOS Next 最新全套视频教程
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
- ArkTS语言
- 安装DevEco Studio
- 运用你的第一个ArkTS应用
- ArkUI声明式UI开发
- .……
《鸿蒙开发进阶》
- Stage模型入门
- 网络管理
- 数据管理
- 电话服务
- 分布式应用开发
- 通知与窗口管理
- 多媒体技术
- 安全技能
- 任务管理
- WebGL
- 国际化开发
- 应用测试
- DFX面向未来设计
- 鸿蒙系统移植和裁剪定制
- ……
《鸿蒙进阶实战》
- ArkTS实践
- UIAbility应用
- 网络案例
- ……
大厂面试必问面试题
鸿蒙南向开发技术
鸿蒙APP开发必备
鸿蒙生态应用开发白皮书V2.0PDF
获取以上完整鸿蒙HarmonyOS学习资料，请点击→
纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。
