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

一、前言

模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果,往往能够吸引人们的眼球,让用户的注意力聚焦在输入的内容上,本文将和大家探讨打字机效果的实现方式以及应用。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 = 0​aboutToAppear(): 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)最新学习路线

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(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学习资料

总结
总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/31293.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每天写java到期末考试(6.21)--集合4--练习--6.20

练习1&#xff1a; 正常写集合 bool类 代码&#xff1a; import QM_Fx.Student;import java.util.ArrayList;public class test {public static void main(String[] args) {ArrayList<Student> listnew ArrayList<>();//2.创建学生对象Student s1new Student(&quo…

八大经典排序算法

前言 本片博客主要讲解一下八大排序算法的思想和排序的代码 &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;排序_普通young man的博客-CSDN博客 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 目录 …

MySQL 面试突击指南:核心知识点解析1

MySQL中有哪些存储引擎? InnoDB存储引擎 InnoDB是MySQL的默认事务型引擎,也是最重要、使用最广泛的存储引擎,设计用于处理大量短期事务。 MyISAM存储引擎 在MySQL 5.1及之前版本,MyISAM是默认的存储引擎。它提供了全文索引、压缩、空间函数(GIS)等特性,但不支持事务和…

【SCAU数据挖掘】数据挖掘期末总复习题库简答题及解析——中

1. 某学校对入学的新生进行性格问卷调查(没有心理学家的参与)&#xff0c;根据学生对问题的回答&#xff0c;把学生的性格分成了8个类别。请说明该数据挖掘任务是属于分类任务还是聚类任务?为什么?并利用该例说明聚类分析和分类分析的异同点。 解答&#xff1a; (a)该数据…

图解Sieve of Eratosthenes(埃拉托斯特尼筛法)算法求解素数个数

1.素数的定义 素数又称质数。质数是指在大于1的自然数中&#xff0c;除了1和它本身以外不再有其他因数的自然数。一个大于1的自然数&#xff0c;除了1和它自身外&#xff0c;不能被其他自然数整除的数叫做质数&#xff1b;否则称为合数&#xff08;规定1既不是质数也不是合数&…

leetCode热题100——两数之和(python)

题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺…

Node.js 是一个开源的 跨平台的JavaScript运行环境

https://www.npmjs.com/ 中央仓库 Visual Studio Code - Code Editing. Redefined https://openjsf.org/ OpenJS 促进了关键 JavaScript 技术在全球范围内的广泛采用和持续发展。 Apache服务器 Nginx服务器 Tomcat服务器 Node.js服务器 Gunicorn服务器 uW…

低代码平台实践:打造高效动态表单解决方案的探索与思考

&#x1f525;需求背景 我司业务同事在抓取到候选人的简历之后&#xff0c;经常会出现&#xff0c;很多意向候选人简历信息不完整&#xff0c;一个个打电话确认的情况&#xff0c;严重影响了HR的工作效率&#xff0c;于是提出我们可以通过发送邮件、短信、H5链接的方式来提醒候…

.NET C# 操作Neo4j图数据库

.NET C# 操作Neo4j图数据库 目录 .NET C# 操作Neo4j图数据库环境Code 环境 VisualStudio2022 .NET 6 Neo4j.Driver 5.21 Code // 连接设置 var uri "bolt://localhost:7687"; var user "neo4j"; var password "password"; // 请替换为你的…

docker 配置与使用

目录 安装docker 作者遇到的问题1&#xff1a;安装docker 错误说明 解决方法&#xff1a; 作者遇到问题2&#xff1a;GPG密钥问题 问题说明 解决方法&#xff1a; 方法一&#xff1a;使用备用的GPG密钥服务器 方法二&#xff1a;使用国内镜像源 方法3&#xff1a;手动下…

使用lua开发apisix自定义插件并发布

接到老大需求&#xff1a;需要对cookie进行操作&#xff0c;遂查询apisix的自带插件&#xff0c;发现有&#xff0c;但不满足&#xff0c;于是自己开发了一个插件并部署&#xff0c;把开发部署流程写在这里打个日志怕以后忘掉。 一、需求 插件很简单&#xff0c;就是在reques…

什么是嵌入式,单片机又是什么,两者有什么关联又有什么区别?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;从科普的角度&#xff0c;…

HTTP 抓包工具——Fiddler项目实战

网络爬虫实质上是模拟浏览器向 Web 服务器发送请求。对于一些简单的网络请求&#xff0c;我们 可以通过查看 URL 地址来构造请求&#xff0c;但对于一些稍复杂的网络请求&#xff0c;仍然通过观察 URL 地 址将无法构造正确。因此我们需要对这些复杂的网络请求进行捕获分…

【总线】AXI4第二课时:深入AXI4总线的基础事务

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…

数字化和信息化的区别是什么?

市面上有些企业专门区分出了数字化和信息化的区别&#xff0c;认为数字化基于信息化的基础之上。但也有一些专家认为两者不是独立或前后的概念&#xff0c;属于近似概念&#xff0c;它到底应当怎样被定义&#xff1f; 其实之前已经写过好几篇这个类型的文章了&#xff0c;但是总…

express+vue在线im实现【四】

往期内容 expressvue在线im实现【一】 expressvue在线im实现【二】 expressvue在线im实现【三】 本期示例 本期总结 支持了音频的录制和发送&#xff0c;如果觉得对你有用&#xff0c;还请点个免费的收藏与关注 下期安排 在线语音 具体实现 <template><kl-dial…

Retrofit类型安全的HTTP客户端库

简介 Retrofit是Square公司开发的一个类型安全的HTTP客户端库&#xff0c;用于Android和Java平台&#xff0c;它使得与Web服务的交互变得更加简单快捷。Retrofit将HTTP API转换成Java接口&#xff0c;让你可以用更简洁的代码形式调用RESTful API&#xff0c;Android网络编程重点…

Vue与SpringSecurity认证整合-06

Vue与SpringSecurity整合 我们要知道springsecurity是一个安全框架,我们在后端的时候没有接触前端,springsecurity引入依赖之后,启动项目会对我们进行拦截,让我们登录,然后我们制定了一个登录页面,也是后端的,我们可以指向我们的登录页面,但是与Vue整合之后,登录页面肯定是在Vu…

贾英才主任受聘担任“两个中心”专家委员会委员

近日&#xff0c;第二届海峡两岸中西医结合肾脏病学术大会授牌仪式在北京隆重举行。 这一盛会吸引了众多医学领域的专家学者&#xff0c;共同探讨中西医结合治疗肾脏病的最新进展和未来发展方向。 在此次大会上&#xff0c;崇文门中医医院的贾英才主任凭借其在肾脏病领域的卓…

【C语言 || 数据结构】二叉树

文章目录 前言 二叉树1.树1.1树的定义1.2 树的结构 2.特殊的树&#xff08;二叉树&#xff09;2.1 二叉树的概念2.2 特殊的二叉树2.3 二叉树的储存2.3.1 顺序储存二叉树2.3.2 链表储存二叉树 2.4 二叉树的遍历2.4.1 二叉树的中序遍历2.4.2 二叉树的前序遍历2.4.3 二叉树的后序遍…