easy-typer-js

功能十分强大打字机插件，兼容原生JS和MVVM类框架（Vue, React...），随心所欲的输出。

一、效果展示

image

easy-typer-js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.而且对MVVM框架支持完美，还兼容原生JS.

二. 使用easy-typer-js

1. 引入easy-typer-js

• 方法1: ES6模块化引入(官方推荐)

// 安装
npm install easy-typer-js --save
或者
yarn add easy-typer-js

// 引入
import EasyTyper from 'easy-typer-js'
// 实例化
const typed = new EasyTyper(obj, input, fn, hooks)

• 方法2: 常规导入

// 下载至本地
<script src="./easy-typer-js"></script>

//cdn导入
<script src="https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.1/easyTyper.min.js"></script>

2.完整实战使用一言Api进行打字机循环输出效果

2.1 在MVVM类框架中使用（Vue）

<template>  
  <div>
    {{ this.obj.output }}
    <span class="easy-typed-cursor">|</span>
  </div>
</template>

<script>
import EasyTyper from 'easy-typer-js'
export default {
  name: 'home',
  data() {
    return {
      obj: {
        output: '',
        isEnd: false,
        speed: 80,
        singleBack: 1,
        sleep: 6000,
        type: 'rollback',
        backSpeed: 40
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.fetchData()
    },
    fetchData() {
      fetch('https://v1.hitokoto.cn')
        .then(res => {
            return res.json()
        })
        .then(({ hitokoto }) => {
            this.initTyped(hitokoto)
        .catch(err => {
            console.error(err)
        })
    },
    initTyped(input, fn, hooks) {
      const obj = this.obj
      const typed = new EasyTyper(obj, input, fn, hooks)
    }
  }
}
</script>

<style lang="stylus">
  .typed-cursor
    margin-left: 10px
    opacity: 1
    -webkit-animation: blink 0.7s infinite
    -moz-animation: blink 0.7s infinite
    animation: blink 0.7s infinite
  @keyframes blink
    0%
      opacity: 1
    50%
      opacity: 0
    100%
      opacity: 1
  
  @-webkit-keyframes blink
    0%
      opacity: 1
    50%
      opacity: 0
    100%
      opacity: 1
  
  @-moz-keyframes blink
    0%
      opacity: 1
    50%
      opacity: 0
    100%
      opacity: 1
</style>

2.2原生实例

<script src="../lib/esayTyped.test.js"></script>
<style>
  .easy-typed-cursor {
    margin-left: 10px;
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
  }
  @keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
  }
  @-webkit-keyframes blink {
    0% {opacity: 1;}
    50% { opacity: 0;}
    100% {opacity: 1;}
  }
  @-moz-keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
  }
</style>
<div id="output">

</div>
<script>
  const obj = {
    output: '', // 输出内容  使用MVVM框架时可以直接使用
    type: 'normal',
    isEnd: false,
    speed: 80,
    backSpeed: 40,
    sleep: 3000,
    singleBack: true
  }
  const typing = new easy-typer-js(obj, `黎明前的黑暗是最深不见底的黑暗！`, (instance)=>{
    // 回调函数 如果这里使用了递归调用会一直循环打印，需要在外部触发停止
    // 此回调用于获取新的数据然后重新输出
    instance.input = `天不生我彭小呆，万古长青一生狂！`
    instance.play()
  }, (output, instance)=>{
    // 钩子函数，每一帧的数据获取和实例easy-typer-js的获取
    document.getElementById('output').innerHTML = `${output}<span class="easy-typed-cursor">|</span>`
  })
  // 12秒后停止
  let timer = setTimeout(() => {
    clearTimeout(timer)
    timer = null
    typing.close()
    alert('stop!')
  }, 12000)
</script>

效果如下

image

加载慢的同学可以看 http://img.pqs.guozhaoxi.top/20191221175917.MP4

三、参数解析 ( Parameter configuration )

3.1 new EasyTyper(obj, input, fn, hooks)

使用方法如下（仅供参考）

  const obj = {
    output: '', // 输出内容  使用MVVM框架时可以直接使用
    type: 'normal',
    isEnd: false,
    speed: 80,
    backSpeed: 40,
    sleep: 3000,
    singleBack: true
  }
  const typing = new easy-typer-js(obj, `黎明前的黑暗是最深不见底的黑暗！`, (instance)=>{
    // 回调函数 如果这里使用了递归调用会一直循环打印，需要在外部触发停止
    // 此回调用于获取新的数据然后重新输出
    instance.input = `天不生我彭小呆，万古长青一生狂！`
    instance.play()
  }, (output, instance)=>{
    // 钩子函数，每一帧的数据获取和实例easy-typer-js的获取
    document.getElementById('output').innerHTML = `${output}<span class="easy-typed-cursor">|</span>`
  })
  // 12秒后停止
  let timer = setTimeout(() => {
    clearTimeout(timer)
    timer = null
    typing.close()
    alert('stop!')
  }, 12000)

3.2 obj配置

3.3 暴露出可直接调用方法

四、更多请查阅

• easy-typer-js官网: http://inner.ink
• Github文档地址: https://github.com/pengqiangsheng/easy-typer-js
• CDN地址: https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.1/easyTyper.min.js