js自動(dòng)打字--autotypejs

autotypejs

use for typing automatically.

介紹

使用原生JavaScript（es6）實(shí)現(xiàn)的自動(dòng)打字效果。

效果圖

WeChat-20200812194957.gif

示例代碼(vue)：

<template>
  <div class="type-container"></div>
</template>

<script>
import AutoType from "autotypejs";
export default {
  name: "AutoType",
  mounted() {
    const autoType = new AutoType(".type-container");
    autoType.config({
      loop: false,
      show_cursor: true,
    });
    autoType
      .setStage({
        type: "add",
        text: "如夢(mèng)今",
        duration: 1000,
        style: {
          "font-weight": "bold",
          "font-size": "23px",
        },
      })
      .setStage({
        type: "delete",
        delete_count: 1,
        duration: 300,
      })
      .setStage({
        text: "令",
        duration: 300,
        style: {
          "font-weight": "bold",
          "font-size": "23px",
        },
      })
      .setStage({
        text: "李清照",
        duration: 500,
        line_wrap: true,
        style: "font-size: 13px; color: #999999;",
      })
      .setStage({
        text: "昨夜雨疏風(fēng)驟，濃睡不消殘酒。",
        duration: 2000,
        line_wrap: true,
      })
      .setStage({
        text: "試問(wèn)卷簾人，卻道海棠依舊。",
        duration: 2000,
        line_wrap: true,
      })
      .setStage({
        text: "是否，是否，",
        duration: 1000,
        line_wrap: true,
      })
      .setStage({
        duration: 1000,
      })
      .setStage({
        type: "delete",
        delete_count: 6,
        duration: 500,
      })
      .setStage({
        text: "知否，知否，",
        duration: 1000,
      })
      .setStage({
        text: "應(yīng)是綠肥紅瘦。",
        duration: 1000,
        line_wrap: true,
      })
      .setStage({
        type: "delete",
        delete_count: 5,
        duration: 500,
      })
      .setStage({
        text: "綠肥",
        duration: 500,
        style: "color: lightgreen; font-size: 25px;",
      })
      .setStage({
        text: "紅瘦",
        duration: 500,
        style: "color: orangered; font-size: 13px;",
      })
      .setStage({
        text: "。",
        duration: 200,
      })
      .setStage({
        media: "image",
        src: require("@/assets/cover.jpg"),
        style: "width: 200px; border-radius: 10px;",
        line_wrap: true,
        duration: 500,
      })
      .setStage({
        duration: 2000,
      })
      .runTask();
    autoType.onceDone(() => {
      console.log("打字完成");
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.type-container {
  white-space: normal;
}

.cursor_typing::after {
  content: "|";
  color: black;
  margin-left: 2px;
}
.cursor_stay::after {
  content: "|";
  color: black;
  margin-left: 2px;
  animation: bling 1.5s infinite;
}
@keyframes bling {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>

用法

獲?。?/h5> 
--yarn--
yarn add autotypejs

--git--
git clone https://github.com/1esse/autotypejs.git

--npm--
npm install --save autotypejs

瀏覽器原生：

<body>
  <div class="type-container"></div>
  <script type="module">
      import AutoType from './browser/autotype.js'
      const autoType = new AutoType('.type-container')
      // ...
  </script>
</body>

vue：

<template>
  <div class="type-container"></div>
</template>

<script>
import AutoType from "autotypejs";
export default {
  name: "AutoTypeExample",
  mounted() {
    const autoType = new AutoType(".type-container");
    // ...
  }
}
</script>

API

config：配置

// ...
// 調(diào)用config函數(shù)并傳入一個(gè)對(duì)象參數(shù)可以配置一些屬性，也可以在實(shí)例化的時(shí)候以第二個(gè)參數(shù)傳入構(gòu)造器進(jìn)行屬性配置
autoType.config({
    cursor_typing: 'cursor_typing',
    cursor_stay: 'cursor_stay',
    loop: false,
})
/** 可配置屬性
* cursor_typing: 打字時(shí)游標(biāo)的css類名
* cursor_stay: 停留時(shí)游標(biāo)的css類名
* loop: 是否循環(huán)
* show_cursor: 是否顯示游標(biāo)
* show_end_cursor: 打字結(jié)束時(shí)是否顯示游標(biāo)
*/

setStage：設(shè)置階段

// ...
autoType.setStage({
  type: "add",
  text: "如夢(mèng)令",
  duration: 1000,
  style: {
    "font-weight": "bold",
    "font-size": "23px",
  },
})

/** 可配置屬性
 * media: 媒體類型 "text"-文本，"image"-圖片，默認(rèn)"text"
 * text: 添加文字
 * duration: 該stage執(zhí)行時(shí)長(zhǎng)
 * type: 類型 add-添加，delete-刪除，默認(rèn)"add"
 * delete_count: 刪除個(gè)數(shù)，type為delete的時(shí)候提供
 * src: 媒體類型為image時(shí)提供
 * line_wrap: 是否換行，默認(rèn)false
 * style: 樣式，接受字符串或者對(duì)象參數(shù)
 */

runTask：?jiǎn)?dòng)任務(wù)

// ...
autoType.setStage({
  type: "add",
  text: "如夢(mèng)令",
  duration: 1000,
  style: {
    "font-weight": "bold",
    "font-size": "23px",
  },
}).runTask()

onceDone：監(jiān)聽(tīng)任務(wù)完成事件

// ...
autoType.onceDone(() => {
    console.log("打字完成")
})

注意事項(xiàng)

  1. 腳本運(yùn)行中需要獲取dom節(jié)點(diǎn)，請(qǐng)確保需要操作的節(jié)點(diǎn)在對(duì)象實(shí)例化前已掛載并傳入正確的標(biāo)識(shí)符（如 .type-container）。
  2. 游標(biāo)的樣式類默認(rèn)為（停留：cursor_stay，打字中：cursor_typing），如果自定義游標(biāo)的樣式類（參考autotype.css），需要重新配置游標(biāo)類名。
  3. 每設(shè)置一個(gè)stage為一個(gè)階段，一個(gè)完整的任務(wù)是按順序執(zhí)行完所有階段。
  4. 監(jiān)聽(tīng)任務(wù)完成事件為每完整執(zhí)行一次任務(wù)觸發(fā)一次，這意味著開(kāi)啟loop循環(huán)的情況下每執(zhí)行完一次都會(huì)觸發(fā)一遍。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容