前言
最近有个云栖大会的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,
}