CocosCreatorでタイピング効果を実現

ココスクリエイターバージョン 3.4.2

結果を示す：

1. プライベート変数を定義しますintervalId。タイマーの ID を保存するために使用されます。

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

2.typeOutText関数を定義します。

この関数は 4 つのパラメータを受け入れます。

msg: 表示される完全なコンテンツ
label: コンテンツを表示する必要があるラベルコンポーネント
callBack: 表示後のコールバック関数、デフォルトは null
time: 再生が完了するまでにかかる秒数。デフォルトは 3 秒です。

関数内では、まず Label コンポーネントのテキストコンテンツを取得し、変数を使用してcontentそれを保存します。index次に、現在表示されている文字インデックスを表す変数を定義します。変数は、typingSpeed1 秒あたりに表示される単語の数を示し、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でタイピング効果を実現

おすすめ