CocosCreator realizes typing effect

Cocos Creator version 3.4.2

Show results:

1. Define a private variable intervalId: used to store the ID of the timer

private intervalId: number = null; // 定时器的 ID

 2. Define typeOutTextthe function:

This function accepts four parameters:

• msg: the complete content to be displayed
• label: Label component that needs to display content
• callBack: The callback function after displaying, the default is null
• time: How many seconds it takes to finish playing, the default is 3 seconds

Inside the function, we first get the text content of the Label component, and use the variable contentto save it. Then, we define a variable indexthat represents the currently displayed character index. The variable typingSpeedindicates how many words are displayed per second, which can be msg.length / timeobtained by calculation.

Use setIntervalthe function to set the timer and execute the callback function every once in a while. If all characters have been displayed, the clear timer is called clearIntervaland the callback function (if any) is executed. Otherwise, add the next character to the Label component, incrementing the index so that the next character is displayed on the next callback. Calculate the time interval between each character to control typing speed.

code show as below:

/**
 * 一个字一个字展示文本内容
 * @param msg 需要展示的完整内容
 * @param label 需要展示内容的 Label 组件
 * @param callBack 展示完毕之后的回调函数，默认为 null
 * @param time 需要多少秒打完，默认为 3 秒
 */
typeOutText(msg: string, label: Label, callBack: Function = null, time: number = 3) {
    let content = msg // 获取 Label 组件的文本内容
    let index = 0; // 当前显示的字符索引
    let typingSpeed = Math.floor(msg.length / time)//每秒展示多少个字
    // 使用 setInterval 设置定时器，每隔一段时间执行一次回调函数
    this.intervalId = setInterval(() => {
        if (index >= content.length) {
            this.clearInterval(); // 如果已经显示完所有字符，则清除定时器并结束函数
            callBack && callBack()
            return;
        }
        label.string += content[index]; // 将下一个字符添加到 Label 组件中
        index++; // 递增索引，以便在下一次回调中显示下一个字符
    }, 1000 / typingSpeed); // 计算每个字符之间的时间间隔，以控制打字速度（单位：毫秒）
}

 3. Define clearIntervalthe function:

This function is used to clear the timer.

private clearInterval() {
    if (this.intervalId !== null) {
        clearInterval(this.intervalId); // 清除定时器
        this.intervalId = null;
    }
}

The complete code is as follows: 

private intervalId: number = null; // 定时器的 ID
/**
 * 一个字一个字展示文本内容
 * @param msg 需要展示的完整内容
 * @param label 需要展示内容的 Label 组件
 * @param callBack 展示完毕之后的回调函数，默认为 null
 * @param time 需要多少秒打完，默认为 3 秒
 */
typeOutText(msg: string, label: Label, callBack: Function = null, time: number = 3) {
    let content = msg // 获取 Label 组件的文本内容
    let index = 0; // 当前显示的字符索引
    let typingSpeed = Math.floor(msg.length / time)//每秒展示多少个字
    // 使用 setInterval 设置定时器，每隔一段时间执行一次回调函数
    this.intervalId = setInterval(() => {
        if (index >= content.length) {
            this.clearInterval(); // 如果已经显示完所有字符，则清除定时器并结束函数
            callBack && callBack()
            return;
        }
        label.string += content[index]; // 将下一个字符添加到 Label 组件中
        index++; // 递增索引，以便在下一次回调中显示下一个字符
    }, 1000 / typingSpeed); // 计算每个字符之间的时间间隔，以控制打字速度（单位：毫秒）
}

//清除定时器
private clearInterval() {
    if (this.intervalId !== null) {
        clearInterval(this.intervalId); // 清除定时器
        this.intervalId = null;
    }
}

Test code:

inputStr() {
    let contentStr = "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试"
    this.descLab.string = ""
    console.log("=============>>>>>>> 开始打字:", this.getTime())
    this.typeOutText(contentStr, this.descLab, () => {
        console.log("=============>>>>>>> 打字完成:", this.getTime())
    }, 4)
}