zoukankan      html  css  js  c++  java
  • 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 打扰了~~

  • 相关阅读:
    Node.js入门学习笔记
    Memcached服务器安装、配置、使用详解
    基于Dubbo框架构建分布式服务
    Apache Beam:一个开源的统一的分布式数据处理编程库
    Spring Cloud Netflix构建微服务入门实践
    内部排序算法:快速排序
    内部排序算法:冒泡排序
    内部排序算法:基数排序
    Java常见面试题
    svn+ssh方式svn服务器和客户端的配置[转载]
  • 原文地址:https://www.cnblogs.com/jhy-ocean/p/11436265.html
Copyright © 2011-2022 走看看