微信小程序实现打字机效果

普通打字机效果

实现：js 定时器将字符串 逐个填充到显示的字段上面  字间隔50毫秒

{{noviceText}}

let typingTime: any = null
let AudioContextoll = wx.createInnerAudioContext({ useWebAudioImplement: true })
data: {strings: '',noviceText: ''
},
onLoad() {let string = '打印的文字'this.setData({strings: string})AudioContextoll.src = "https://oss-test.newplay7.com/20221229/16723073755532453.mp3"AudioContextoll.play()typingTime && clearTimeout(typingTime)typingTime = setTimeout(() => {this.textTyping(string, 0)}, 500)
},
textTyping(s: string, x: number) {if (s.length <= x) {AudioContextoll.stop()return}typingTime = setTimeout(() => {this.setData({noviceText: this.data.noviceText + s[x]})this.textTyping(s, x + 1)}, 50)
},
//点击结束打字效果
popUpClick() {this.setData({noviceText: this.data.strings})AudioContextoll.stop()clearTimeout(typingTime)
}

效果：

富文本打字机效果（支持文字颜色 换行）

实现：str 为要打字的字符串

使用正则过滤出字符串中的每一个字生成数组

let charArr = str.replace(/<.+?\/?>/g, '').split('');

初始化显示数据数组 

let tempStrArr:any = [str]

 从第最后一个开始倒序循环  获取数据数组从第一个开始的数据  

let curStr = tempStrArr[charArr.length - i];

获得数据 curStr 从后开始查找对应的字符串  （lastIndexOf）

let lastIdx = curStr.lastIndexOf(charArr[i - 1])

 截取 字符串第一个到对应字符串的数据

let prevStr = curStr.slice(0, lastIdx)

// pages/newHand/component/typewriter.ts
let typerTimer: any = null; // 计时器Id
let AudioContextoll = wx.createInnerAudioContext({ useWebAudioImplement: true })
let clearTime: any = null
Component({/*** 组件的属性列表*/properties: {hidden: {type: Boolean,value: false,observer: function(a) {if(a) {this.typewriterBegin(this.data.str)}}},str: {type: String,value: ''}},/*** 组件的初始数据*/data: {noviceText: '',tempStrArr: [],escShow: false},attached() {},/*** 组件的方法列表*/methods: {typewriterBegin(str: String) {let charArr = str.replace(/<.+?\/?>/g, '').split('');let tempStrArr:any = [str];for (let i = charArr.length; i > 1; i--) {let curStr = tempStrArr[charArr.length - i];let lastIdx = curStr.lastIndexOf(charArr[i - 1]);let prevStr = curStr.slice(0, lastIdx);let nextStr = curStr.slice(lastIdx + 1, curStr.length);tempStrArr.push(prevStr + nextStr);}this.setData({tempStrArr})AudioContextoll.src = "https://oss-test.newplay7.com/20221229/16723073755532453.mp3"AudioContextoll.play()let charIdx = tempStrArr.lengththis.textTyping(this, tempStrArr, charIdx)},textTyping(that: any, array: any, charIdx: number) {typerTimer && clearInterval(typerTimer)typerTimer = setTimeout(()=> {if(that.data.noviceText == array[charIdx]) {that.typewriterFinish()return}that.setData({noviceText: array[charIdx]})charIdx -= 1that.textTyping(that, array, charIdx)}, 50)},typewriterFinish() {typerTimer && clearInterval(typerTimer)AudioContextoll.stop()console.log('打字结束')this.triggerEvent('finish')},// 跳过打字escTypewriter() {if(this.data.noviceText == this.data.tempStrArr[0] || this.data.escShow) {return}this.setData({escShow: true})clearTime && clearTimeout(clearTime)clearTime = setTimeout(()=> {this.setData({escShow: false})}, 300)this.setData({noviceText: this.data.tempStrArr[0]})this.typewriterFinish()},clean() {//重新开始this.setData({noviceText: ''})this.typewriterBegin(this.data.str)}}
})

效果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！