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

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

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

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实现打印机效果)