CocosCreator 实现打字效果

CocosCreator 版本3.4.2

效果展示：

1.定义私有变量 intervalId：用来存储定时器的ID

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

2.定义 typeOutText 函数：

这个函数接受四个参数：

msg：需要展示的完整内容
label：需要展示内容的 Label 组件
callBack：展示完毕之后的回调函数，默认为 null
time：需要多少秒打完，默认为 3 秒

在函数内部，我们首先获取 Label 组件的文本内容，并使用变量 content 进行保存。然后，我们定义了一个变量 index，用于表示当前显示的字符索引。变量 typingSpeed 表示每秒展示多少个字，可以通过计算 msg.length / time 得到。

使用 setInterval 函数设置定时器，每隔一段时间执行一次回调函数。如果已经显示完所有字符，就调用 clearInterval 清除定时器，并执行回调函数（如果有）。否则，将下一个字符添加到 Label 组件中，递增索引，以便在下一次回调中显示下一个字符。计算每个字符之间的时间间隔，以控制打字速度。

代码如下：

/**
 * 一个字一个字展示文本内容
 * @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.定义 clearInterval 函数：

这个函数用于清除定时器。

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

完整代码如下：

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;
    }
}

测试代码：

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

CocosCreator 实现打字效果

猜你喜欢