CocosCreator 实现打字效果

最新推荐文章于 2023-11-17 09:57:19 发布

小张不爱写代码

最新推荐文章于 2023-11-17 09:57:19 发布

阅读量684

点赞数

文章标签： CocosCreator typescript

本文链接：https://blog.youkuaiyun.com/qq_41973169/article/details/131851711

版权

文章介绍了在CocosCreator3.4.2版本中如何创建一个功能，该功能能逐字展示Label组件上的文本内容。通过定义私有变量存储定时器ID，以及typeOutText函数来控制文字的显示速度和回调，实现了类似打字机的效果。同时提供了一个clearInterval函数用于清除定时器。示例代码展示了如何使用这个功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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