cocos creator 实现打字机的效果
作为一个萌新,我只想说我是没有感情的粘贴工具!
let richText = this.viewNode.getChildByName('richText').getComponent(cc.RichText); const str = "<u>hello</u><color=#ff0000>Red Text,</color><br/>"+ "<size=60>enlarge me,</size>"+ "<br/><outline color=red width=4>A label with <i>outline,</i></outline>"+ "<br/><b>This text will be rendered as bold,</b>"+ "<br/><i>This text will be rendered as italic。</i>"; this.richText(richText,str); private richText(richTextNode,str: string = "") { const regex = /<.+?\/?>/g; // 匹配尖括号标签 const matchArr = str.match(regex); const specialChar = "│"; const replaceStr = str.replace(regex, specialChar); // 标签数组 const textArr: string[] = replaceStr.split(specialChar); // 文字数组 const strArr: string[] = []; // 存放处理过的文字数组 let paraNum = 0; // 待替换参数个数 for (let text of textArr) { // 非空字符替换成类似 $[0-n] 参数 if (text !== "") { text = `$[${paraNum}]`; paraNum += 1; } strArr.push(text); } let templetStr: string = strArr.join(specialChar); // 数组转成待替换字符串 for (let index = 0; index < textArr.length; index++) { // 转换代替换字符串之后, 删除文字数组多余空字符 if (textArr[index] === "") { textArr.splice(index, 1); index = index - 1; } } while (templetStr.search(specialChar) !== -1) { // 数组转成的字符串原本 '特殊字符' 位置都是富文本标签的位置, 替换回标签 if (matchArr[0]) { templetStr = templetStr.replace(specialChar, matchArr[0].toString()); matchArr.splice(0, 1); } else { templetStr = templetStr.replace(specialChar, "");// 空字符串替换,防止死循环 console.warn("matchArr not enough"); } } const lastStrArr: string[] = []; // 转换后富文本数组 const arrayParm: string[] = new Array(paraNum).fill(""); // 替换参数数组 for (let i = 0; i < textArr.length; i++) { for (const text of textArr[i]) { arrayParm[i] = arrayParm[i] + text; let replaceStr1 = templetStr; for (let index = 0; index < paraNum; index++) { replaceStr1 = replaceStr1.replace(`$[${index}]`, arrayParm[index]); } lastStrArr.push(replaceStr1); } } let lastStrIndex = 0; const func = () => { if (lastStrIndex >= lastStrArr.length) { return; } richTextNode.string = lastStrArr[lastStrIndex]; lastStrIndex += 1; setTimeout(() => { func(); }, 100); }; setTimeout(() => { func(); }, 1000); }
我只是战略性mark 打扰了~~