typewriter.ts

    1. import type { Ref } from 'vue'
    3. // 打字机效果函数的返回类型
    4. type typewriterReturnType = {
    5.   writeTimer: NodeJS.Timeout
    6.   delTimer: NodeJS.Timeout | undefined
    7.   speedChangeTimer: NodeJS.Timeout
    8. }
    10. /**
    11.  * 打字机效果
    12.  *
    13.  * @param textRef 文本的 ref 响应式对象
    14.  * @param delEnable 是否开启文本的删除效果，默认开启
    15.  * @param speedChangeDuration 打字速度与删除文本速度改变的周期时间，默认 1500 ms
    16.  * @param writeSpeedMin 最小打字速度，每个字符出现的时间间隔，时间间隔越大该值越大，默认 350 ms
    17.  * @param writeSpeedMax 最大打字速度，每个字符出现的时间间隔，时间间隔越大该值越小，默认 75 ms
    18.  * @param delSpeedMin 最小删除速度，每个字符消失的时间间隔，时间间隔越大该值越大，默认 150 ms
    19.  * @param delSpeedMax 最大删除速度，每个字符消失的时间间隔，时间间隔越大该值越小，默认 50 ms
    20.  * @returns {typewriterReturnType} 返回改变打字速度与删除文本速度的定时器、打字定时器与删除文本定时器，
    21.  * 方便调用者对定时器进行清除
    22.  */
    23. const typewriter = (
    24.   textRef: Ref<string>,
    25.   delEnable: boolean = true,
    26.   speedChangeDuration: number = 1500,
    27.   writeSpeedMin: number = 350,
    28.   writeSpeedMax: number = 75,
    29.   delSpeedMin: number = 150,
    30.   delSpeedMax: number = 50,
    31. ): typewriterReturnType => {
    32.   // 打字定时器
    33.   let writeTimer: NodeJS.Timeout
    34.   // 删除文本定时器
    35.   let delTimer: NodeJS.Timeout | undefined
    36.   // 打字速度
    37.   let writeSpeed: number = genRandomIntBoth(writeSpeedMax, writeSpeedMin)
    38.   // 文本删除速度
    39.   let delSpeed: number
    40.   // 文本字符串
    41.   const text: string = textRef.value
    42.   // 当前要打字或删除的文本字符索引
    43.   let textIdx: number = 0
    44.   // 当前处于打字和删除文本哪个状态，true — 打字，false — 删除文本
    45.   let status: boolean = true
    47.   // 初始状态下，页面中无文本
    48.   textRef.value = ''
    49.   // 如果开启文本的删除效果
    50.   if (delEnable) {
    51.     delSpeed = genRandomIntBoth(delSpeedMax, delSpeedMin)
    52.   }
    54.   /**
    55.    * 打字效果
    56.    */
    57.   function writing(): void {
    58.     // 写入文本字符
    59.     textRef.value += text[textIdx++]
    60.     // 文本写入完成
    61.     if (textIdx >= text.length) {
    62.       // 清除打字定时器
    63.       clearInterval(writeTimer)
    64.       // 如果开启了文本的删除效果
    65.       if (delEnable) {
    66.         // 修改状态
    67.         status = false
    68.         // 创建删除文本定时器
    69.         delTimer = setInterval(deleting, delSpeed)
    70.       } else {
    71.         // 清除文本，重新创建打字定时器
    72.         textRef.value = ''
    73.         textIdx = 0
    74.         writeTimer = setInterval(writing, writeSpeed)
    75.       }
    76.     }
    77.   }
    79.   /**
    80.    * 删除文本效果
    81.    */
    82.   function deleting(): void {
    83.     // 删除文本字符
    84.     textRef.value = text.substring(0, textIdx--)
    85.     // 文本删除完成
    86.     if (textIdx < 0) {
    87.       // 清除删除文本定时器
    88.       clearInterval(delTimer)
    89.       // 重置当前要打字或删除的文本字符索引
    90.       textIdx = 0
    91.       // 修改状态
    92.       status = true
    93.       // 创建打字定时器
    94.       writeTimer = setInterval(writing, writeSpeed)
    95.     }
    96.   }
    98.   // 创建打字定时器，开启打字机效果
    99.   writeTimer = setInterval(writing, writeSpeed)
    100.   // 创建改变打字速度与删除文本速度的定时器
    101.   // 改变打字速度与删除文本速度的定时器
    102.   const speedChangeTimer: NodeJS.Timeout = setInterval(() => {
    103.     // 当前处于打字状态就只修改打字速度
    104.     if (status) {
    105.       // 改变打字速度
    106.       writeSpeed = genRandomIntBoth(writeSpeedMax, writeSpeedMin)
    107.       // 重新创建定时器
    108.       clearInterval(writeTimer)
    109.       writeTimer = setInterval(writing, writeSpeed)
    110.       return
    111.     }
    112.     // 当前处于删除文本状态就只修改删除文本速度
    113.     // 如果开启了文本的删除效果
    114.     if (delEnable) {
    115.       // 改变删除文本速度
    116.       delSpeed = genRandomIntBoth(delSpeedMax, delSpeedMin)
    117.       // 重新创建定时器
    118.       clearInterval(delTimer)
    119.       delTimer = setInterval(deleting, delSpeed)
    120.     }
    121.   }, speedChangeDuration)
    123.   // 返回改变打字速度与删除文本速度的定时器、打字定时器与删除文本定时器，
    124.   // 方便调用者对定时器进行清除
    125.   return {
    126.     writeTimer,
    127.     delTimer,
    128.     speedChangeTimer,
    129.   }
    130. }
    132. export default typewriter

    css

    1. /******************************* 打字机效果中的光标 *******************************/
    2. /* 打字机效果中的光标 */
    3. /* 在文本内容的最后通过添加行内元素以达到光标跟随文字的输入移动的效果 */
    4. .typewriter::after {
    5.   content: '|';
    6.   animation: cursor-blinks 1s infinite;
    7. }
    9. /* 光标闪烁动画 */
    10. @keyframes cursor-blinks {
    11.   0% {
    12.     opacity: 1;
    13.   }
    14.   50% {
    15.     opacity: 0;
    16.   }
    17.   100% {
    18.     opacity: 1;
    19.   }
    20. }