美文网首页
关于creator中label实现打印机效果

关于creator中label实现打印机效果

作者: 你猜卟透_faa8 | 来源:发表于2019-07-13 16:49 被阅读0次

    富文本中的文字一个个出现

    //使用富文本实现打字的效果

    richText:function(richtext,str) {

     this.richtextrunaction = true;

     const regex = /<.+?\/?>/g; // 匹配尖括号标签

     const matchArr = str.match(regex);

     const specialChar = "│";

     const replaceStr = str.replace(regex, specialChar); // 标签数组

     const textArr = replaceStr.split(specialChar); // 文字数组

     const strArr = []; // 存放处理过的文字数组

     let paraNum = 0; // 待替换参数个数

     for (let text of textArr) {

     // 非空字符替换成类似 $[0-n] 参数

     if (text !== "") {

     text = `$[${paraNum}]`;

     paraNum += 1;

            }

     strArr.push(text);

        }

     let templetStr = 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 = []; // 转换后富文本数组

     const arrayParm = 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) {

     this.richtextrunaction = false;

     return;

            }

     if(this.richtextrunaction == false)

            {

     return;

            }

            richtext.string = lastStrArr[lastStrIndex];

     lastStrIndex += 1;

     setTimeout(() => {

     func();

    }, 10);

        };

     setTimeout(() => {

     func();

    }, 100);

    },

    setRichTextaction:function(value) {

     return;

     this.richtextrunaction = value

    },

    getRichTextaction:function () {

     return this.richtextrunaction;

    }

    不用富文本的方式用label实现打印,这种方法更加简便

    onLoad:function () {

            this.typingAni(this.text1,this.text1.string,function () {

                this.text1.node.destroy();

            }.bind(this),false)

            var callback = function() {

                    this.typingAni(this.text2,this.text2.string,null,false);

            }

            this.scheduleOnce(callback, 10);

        },

        typingAni: function (label, text, cb,isclick) {

            this.isclick = isclick;

            var self = this;

            var html = '';

            var arr = text.split('');

            var len = arr.length;

            var step = 0;

            self.func = function () {

                if(this.isclick == true){

                  label.string = text;

                  return;

                }

                html += arr[step];

                label.string = html;

                if (++step == len) {

                    self.unschedule(self.func, self);

                    cb && cb();

                }

            }

            self.schedule(self.func,0.1, cc.macro.REPEAT_FOREVER, 0)

        },

        onButton:function (btn,value) {

            if(value == 1){

                cc.director.loadScene("addScore");

            }

            else if(value == 2){

                this.isclick = true;

            }

        },

    相关文章

      网友评论

          本文标题:关于creator中label实现打印机效果

          本文链接:https://www.haomeiwen.com/subject/exsmkctx.html