HarmonyOS一杯冰美式的时间 -- 打字机

704 阅读4分钟

一、前言

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

二、思路

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

效果如下:

Screenshot_20240530143049761

三、数据源

随便抄了一段文本:

     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)
     }
 }

九、结尾

最后、如果您有任何疑问、对文章写的不满意、发现错误或者有更好的方法,欢迎在评论、私信或邮件中提出,非常感谢您的支持。🙏