React流式打字效果实现(不需要CSS) - Typing Effect with out use Css

前言

最近有个云栖大会的demo展示需求,要实现个类似的打字效果,所以我找了找相关的库。找到一个还不错的~叫iTyped.js。但是最终的效果和我想要的不太一样,会有回删效果,看了下源码,所以就自己写了一个~

再夸奖下 iTyped.js 只有3K,非常小而美,完全靠JS实现的效果!

 

最终效果

边播放语音,边出现文字的打字效果,gif 效果如下~

 

源码分享

 

变量设置

//全局 变量设置 - 如果想要速度不一致也可以写成内部变量
const typingRate = 250;//内部 变量设置constructor(props) {super(props);this.state = {//打字出的文字textAreaShow: "",// 是否在打字中isTyping: false,//等待被打字的数组waitToType: [],//延迟打字开始的时间delayTime: this.props.delayTime || false,}}

 

打字函数

 /*** 打字函数* @param  {[type]} stringAll 打印的总字符* @param  {[type]} char      目前的打印的字符* @param  {[type]} nowPosition 现在的打印的位置* @return {[type]}           [description]*/typing(stringAll, char, nowPosition) {// 如果打印位置小于 字符串总长度// 还是在打印中 isTyping :true// textAreaShow 字符串增加一个字符// 继续 打印下一字符if (nowPosition < stringAll.length) {let textAreaShow = this.state.textAreaShow + char;this.setState({textAreaShow: textAreaShow,isTyping: true,}, () => {setTimeout(() => this.typing(stringAll, stringAll[nowPosition + 1], nowPosition + 1), typingRate);}, this)}// 已经打印完毕了// isTyping 设置为 false// 查看数组中是否还有未打印的,如果有就打印else if (nowPosition >= stringAll.length) {this.setState({isTyping: false,}, () => {let waitToType = this.state.waitToType;if (waitToType.length > 0) {let stringInput = waitToType.shift();setTimeout(() => this.typing(stringInput, stringInput[0], 0), typingRate);this.setState({waitToType: waitToType})}}, this)}}

 

流式打字效果冲突处理

流式的的不同,增加了是否在打印中的判断

如果 “在打印中” 就放到等待打印的数组中,避免 打印效果错乱

    componentWillReceiveProps(nextProps) {// 需要打印的数组let textArea = nextProps.textArea;// 之前需要打印的数组let befTextArea = this.props.textArea || [];// 等待打印的数组,方便setStatelet waitToType = JSON.parse(JSON.stringify(this.state.waitToType));// 等待打印的字符let stringAll;// 切换时,重置if (textArea.length === 0) {this.setState({textAreaShow: "",waitToType: [],})}// 初始化的时候,直接打印if (this.state.textAreaShow === "" && this.state.delayTime && textArea.length > 0 && textArea.length > befTextArea.length) {stringAll = textArea[textArea.length - 1];// waitToType.push(stringAll);setTimeout(() => this.typing(stringAll, stringAll[0], 0), typingRate + this.state.delayTime);} // 如果正在打印,把 字符串 推入 waitToType数组中else if (textArea.length > 0 && textArea.length > befTextArea.length) {stringAll = textArea[textArea.length - 1];if (this.state.isTyping) {waitToType.push(stringAll);this.setState({waitToType: waitToType})} else {setTimeout(() => this.typing(stringAll, stringAll[0], 0), typingRate);}}}

 

 

 

Codepen DEMO

https://codepen.io/CandyQiu/pen/gywZKw

 

 

 

 

资料参考

1. iTyped:https://github.com/luisvinicius167/ityped

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

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

相关文章

模仿Chart GPT输出的打字效果

demo代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title>打字机</title><style>.text {font-size: 40px;}.content {text-align: center;font-size: 0;}.blink {font-size: 40px;animation: tia…

chatgpt赋能python:Python怎么入侵手机

Python怎么入侵手机 现在移动设备已经成为人们生活中必不可少的一部分&#xff0c;因此&#xff0c;攻击者越来越多地将目光转向移动设备。 进入移动设备的主要方式之一是通过应用程序漏洞进行攻击。而Python编程语言的出现可以让攻击者更容易地发掘和利用这些漏洞&#xff0c…

中国外汇交易中心员工英语培训四次合作TutorABC

成人在线英语教育品牌TutorABC的企业英语培训方案已经受到各大企业及协会的认可&#xff0c;这是众所周知的事情。就在双十一前夕&#xff0c;TutorABC与中国外汇交易中心达成年度语言培训合作&#xff0c;这已经是双方连续第四年在企业英语培训领域展开合作&#xff0c;TutorA…

报Python培训班多少钱?报个班值得吗?

报Python培训班多少钱&#xff1f;报个班值得吗&#xff1f;报培训机构学习Python学费一般是要1~2万元之间&#xff0c;每个培训机构收费标准都是不一样&#xff0c;要根据不同的班型、学习时长等因素来收费&#xff0c;而且Python的学费也会受到所在城市的消费水平影响。学习时…

Language Model Reasoning

来自&#xff1a;天宏NLP 作者&#xff1a;tianhongzxy 自从那篇著名的《Chain of Thought Prompting Elicits Reasoning in Large Language Models》发布以来&#xff0c;一下子引爆了使用 Large Language Models (LLMs) 做推理任务的热潮。同时&#xff0c;越来越多的研究者开…

Science前沿:大语言模型涌现演化信息,加速蛋白质结构预测

导语 从蛋白质序列直接预测三维结构&#xff0c;AlphaFold 此前取得了突破性进展。而蛋白质与人类的语言有天然的相似性&#xff0c;蛋白质的氨基酸序列就像是语言的字母&#xff0c;语言模型有可能在整个演化过程中学习蛋白质序列的模式&#xff0c;是否可以用大语言模型预测蛋…

中国数字经济产业发展大会在苏州相城成功举办

中国数字经济产业发展大会&#xff08;CCDE2023&#xff09;于3月25日在苏州成功举办。本次大会分论坛涵盖了“大数据产业、算力发展、数字金融产业、智能网联汽车产业、数字孪生技术、数字化转型、青年创新创业”等多个方向。CCDE2023汇聚数字经济产业的专业力量&#xff0c;为…

清华叉院杨植麟新公司曝光:专搞大模型,组明星团队,拿了红杉真格天使投资...

衡宇 发自 凹非寺量子位 | 公众号 QbitAI 又一家AI初创大模型公司&#xff0c;刚刚浮出水面。 名为月之暗面&#xff0c;主要业务剑指AGI。 成立后已迅速完成首轮市场融资&#xff0c;获红杉、真格等一线VC的押注&#xff0c;市场估值被曝约在3亿美元。 公司拥有明星团队&#…

要么打工,要么单干,但千万别跟“陌生人”一起创业

这是头哥侃码的第285篇原创 前些天看到孟岩老师发的一篇文章《且慢&#xff0c;重新说再见》&#xff0c;里面内容主要就是讲了孟岩老师从前公司被迫离职后&#xff0c;我对此非常感触。在创业的过程中&#xff0c;选择一个合适的合伙人是多么重要。 熟悉我的小伙伴可能都知道&…

3分钟测试:你是否适合这份月薪20K的软件测试工作?

如果大家在学习中遇到困难&#xff0c;想找一个软件测试学习交流环境&#xff0c;可以加入我们的测试圈&#xff1a;786229024。 测试面试话题1&#xff1a;敏捷开发与测试 以下是我个人总结的一些经验&#xff1a; 传统开发模式&#xff1a;&#xff36;模式&#xff0c;瀑布…

我与计算机的不解之缘

虽然在计算机方面多有涉猎&#xff0c;但是我纯属是业余的&#xff0c;我学的热能专业和计算机关联也不大。也可能是小小的缘分吧&#xff0c;在计算机应用领域摸爬滚打了一年多&#xff0c;这个过程概括来说就是&#xff1a;痛并快乐着。为什么会痛呢&#xff1f;因为软件需要…

ChatGPT APIs for HCL DOMINO

大家好&#xff0c;才是真的好。 近期网络上最热闹的话题就是OpenAI的ChatGPT&#xff0c;从去年11月份到现在&#xff0c;一波又一波热潮蜂拥而至&#xff0c;以至于让我们Domino人应接不暇。 ChatGPT和Domino的缘分还真不是完全没有&#xff0c;毕竟刚出来时&#xff0c;很…

如何用老友记学英语

对于老友记如何学英语&#xff0c;个人的英语学习心得&#xff0c;希望对你有帮助。 学习英语前的第一步&#xff1a;建立英语思维 我是一名英语过了专八的学生 为什么大家学英语学得这么累&#xff0c;最后依然对英语糊糊涂涂&#xff1f;原因只有一个——就是我们的学习能…

计算机应用英语app,学英语必备的9款APP,学生党都在用

原标题&#xff1a;学英语必备的9款APP&#xff0c;学生党都在用 外语学习必备的九个app超级实用&#xff01; 不背单词(单词本) 界面设计的十分简洁&#xff0c;深邃模式的壁纸特别好看&#xff01;听写模式也很人性化&#xff01;可以把刚才学过的单词重复读出来然后自己在纸…

输入正确的账号密码,请与所请求的格式保持一致

解决办法&#xff1a;清除浏览器缓存&#xff0c;再次输入账号密码即可

常见密码格式

一.密文由0~9和a~f组成的字符串&#xff08;明文&#xff1a;123456&#xff09; 1.MD5加密 16位&#xff1a;49ba59abbe56e057 32位&#xff1a;e10adc3949ba59abbe56e057f20f883e 2.SHA1加密 40位&#xff1a;7c4a8d09ca3762af61e59520943dc26494f8941b 3.HMAC加密 32…

贪吃蛇java源代码

这个贪吃蛇是我学完Java之后的课程设计作业&#xff0c;做了有挺久的&#xff0c;做完这个小游戏&#xff0c;自己对Java的一些知识也更了解了些。其中包括按完按钮后焦点的处理啊&#xff0c;还有就是图形的闪烁问题。我当时做的时候基本是在自己电脑上完成的&#xff0c;后来…

贪吃蛇游戏代码详解

内容目录 什么是帧帧 如果时间片足够小 就是动画 一秒 三十帧 六十帧 连起来就是动画 拆分就是静态的图片 键盘监听 定时器 Timer 代码步骤在功能集合类中 重点 &#xff08;步骤&#xff09; 1 先定义数据 2 先用画笔将数据画上去 3 加入到监听事件中 &#xff08;键盘监听事件…

贪吃蛇完整代码----GUI

整个代码分为三部分 1.游戏开始界面2.data基本图片的添加3.面板&#xff0c;将小蛇画到面板上 这是游戏完整界面 1. 游戏开始界面 public class StartGame {public static void main(String[] args) {JFrame frame new JFrame();frame.setBounds(10,10,900,720);frame.se…

python贪吃蛇代码

文末用python写好了贪吃蛇代码可直接复制使用&#xff01; 今天和大家分享一下贪吃蛇的代码&#xff0c;主要是贪吃蛇的一些基本知识&#xff0c;以及怎么去玩。 首先&#xff0c;我们先了解一下什么是贪吃蛇&#xff1f;它是一个具有多种功能的游戏&#xff0c;可以通过点击屏…