easy-typer-js

v2.1.0

Published

2 years ago

Very powerful JS typewriter plugin, compatible with native JS and MVVM class framework (Vue, React...), whatever you want to output.

Downloads

1,036

0High
0Medium
0Low

pengqiangsheng

typed typing easy typer easytyper easy-typer easy-typer-js

easy-typer-js

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

特点（优势）

与其他相似的打字机插件我们的有点在哪里？

1. 我们的打字机不操作DOM，重要的事情讲三遍，不操作DOM！不操作DOM！不操作DOM！
1. 我们的打字机与MVVM框架结合性能超棒！
1. 我们的打字机只改变数据对象的输出，并不对DOM进行操作！

去我的站点看真正的效果

=> 彭小呆的随笔杂谈 <=

一、效果展示

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

二、使用easy-typer-js

2.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/[email protected]/easy-typer-min.js"></script>

2.2 使用它作为你最强大的武器吧！

2.2.1 在原生JS中使用

打开页面你会发现黎明前的黑暗是最深不见底的黑暗！这句话被一个一个字敲出来！哇哦！是不是很炫酷！

  const typing = new EasyTyper(obj, `黎明前的黑暗是最深不见底的黑暗！`, 
    instance => {
      // 回调函数
      // 此回调一般用于获取新的数据然后循环输出
      // instance { 实例EasyTyper }
      console.log(instance) // 打印出实例对象
    }, (output, instance)=>{
      // 钩子函数
      // output { 当前帧的输出内容 }
      // instance { 实例EasyTyper }
      // 通过钩子函数动态更新dom元素
      document.getElementById('output').innerHTML = `${output}`
  })

2.2.2 在Vue中使用

打开页面你会发现我将要被打字机输出这句话被一个一个字敲出来!

<template>	
  // 动态绑定
  <div>{{ obj.output }}</div>
</template>
<script>
import EasyTyper from 'easy-typer-js'
export default {
  name: 'home',
  data() {
    return {
      obj: {
        output: '',
        // 其他参数省略
      }
    }
  },
  mounted() {
    const typed = new EasyTyper(this.obj, `我将要被打字机输出`)
  }
}
</script>

2.2.3 在React中使用

打开页面你会发现我是被React所创造出来的！这句话上帝所诉说！

import EasyTyper from 'easy-typer-js'

class showText extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      output: '',
      typer: null
    }
    this.initTyper = this.initTyper.bind(this)
    this.changeOutput = this.changeOutput.bind(this)
  }

  initTyper() {
    // 配置对象
    const obj = {
      output: '',
      isEnd: false,
      speed: 80,
      singleBack: false,
      sleep: 0,
      type: 'normal',
      backSpeed: 40,
      sentencePause: false
    }
    // 实例化
    this.typer = new EasyTyper(obj, '我是被React所创造出来的！', this.completeAsentence, this.changeOutput)
  }

  // 输出完毕后的回调函数
  completeAsentence() {
    console.log('输出完毕！长官！')
  }

  // 钩子函数和setState结合
  changeOutput(output) {
    this.setState(state => ({
      output: output
    }))
  }

  render() {
    return (
      <p>{this.state.output}</p>
    )
  }
}

2.3[实战] 实践出真理 ( 完整代码 )

2.3.1 Vue + Vuepress + 一言API === 实现博客首页炫酷文字输出效果

以下为完整代码！！！

<template>	
  <div>
    {{ 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: false,
        sleep: 0,
        type: 'rollback',
        backSpeed: 40,
        sentencePause: false
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.fetchData()
    },
    fetchData() {
        // 一言Api进行打字机循环输出效果
      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>

效果如下就是首页你们可以看到的啦！:pig:

回滚时间`sleep`设置为0时的效果

2.3.2 在React中

import React from 'react'
import logo from './logo.svg'
import './App.css'
import EasyTyper from 'easy-typer-js'

class showText extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      output: '',
      typer: null
    }
    this.initTyper = this.initTyper.bind(this)
    this.changeOutput = this.changeOutput.bind(this)
  }

  componentDidMount() {
    this.initTyper()
  }

  componentWillUnmount() {
    this.typer.close()
  }

  initTyper() {
    // 配置对象
    const obj = {
      output: '',
      isEnd: false,
      speed: 80,
      singleBack: false,
      sleep: 0,
      type: 'normal',
      backSpeed: 40,
      sentencePause: false
    }
    // 实例化
    this.typer = new EasyTyper(obj, '我是被React所创造出来的！', this.completeAsentence, this.changeOutput)
  }

  // 输出完毕后的回调函数
  completeAsentence() {
    console.log('输出完毕！长官！')
  }

  // 钩子函数和setState结合
  changeOutput(output) {
    this.setState(state => ({
      output: output
    }))
  }

  render() {
    return (
       <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>{this.state.output}</p>
         <a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
         >
           上帝
         </a>
       </header>
     </div>
    )
  }
}

export default showText

效果如下

只输出一句话

2.3.3 原生实例

<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/easy-typer-min.js"></script>


const obj = {
  output: '', // 输出内容  使用MVVM框架时可以直接使用
  type: 'normal',
  isEnd: false,
  speed: 80,
  backSpeed: 40,
  sleep: 3000,
  singleBack: true,
  sentencePause: false
}
const typing = new easyTyper(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.1 new EasyTyper(obj, input, fn, hooks)

|参数| 说明 |回调 | 是否必须| |---|-------|-----|------| |obj| 配置对象 | 无 | 必须一定有且格式要对，十分严格，比起教导主任毫不逊色| |input| 内容输入 | 无 | 可以没有，会有小彩蛋| |fn| 完成一次output输出后的回调函数 | 当前easy-typer-js实例instance | 否 | |hooks| 钩子钩在每一帧将要完成的时间片段上 | 当前帧输出的内容、当前easy-typer-js实例instance | 否 |

回调函数与钩子函数使用方法在上面都使用到了哦

3.2 obj配置

| 参数(params) | 含义(meaning) | 类型(type) | | --------------------- | ----------------------------------------------- | ---------------- | | output | 输出内容,使用MVVM框架时直接使用 { obj.output } | string | | type | 下一次的行为 'roolback', 'normal', 'custom' | string(有且仅有此三种) | | isEnd | 全局控制是否终止 | boolean | | speed | 打字速度 | number | | backSpeed | 回滚速度 | number | | sleep | 完整输出完一句话后，睡眠一定时间后触发回滚事件 | number | | singleBack | 单次的回滚（优先级高于type） | boolean | | sentencePause | 整个生命周期运行完毕后，句子是否暂停显示（仅在回滚模式下生效） | boolean | obj配置对象校验非常严格，对象的字段和类型都要遵从以上格式，否则你会在控制台看到一个非常显眼的error！

3.3 暴露出可直接调用方法

|方法名| 说明 |参数 | |---|-------|-----| |close| 停止打字 | 无 | |sleep| 单独可以调用睡眠线程，可以使用在任何地方 | ms(毫秒) |

3.4 源码

源码都在GitHub上开源了，可以自行查看，后续还会继续更新。

四、原理解析与FAQ

4.1 为什么说我们的打字机不进行DOM操作？

可以去Github查看我们的打字机源码，你会发现里面没有一行代码有涉及DOM操作的。

4.2 我们怎么做到的不涉及DOM操作的？

我们秉承一个概念，数据输入进来，我们拷贝一份数据，然后对数据进行解析，最后使用一个对象进行数据的输出！

五、更多请查阅

easy-typer-js官网: https://inner.ink/typer/
Github文档地址: https://github.com/pengqiangsheng/easy-typer-js
CDN地址: https://cdn.jsdelivr.net/npm/[email protected]/easy-typer-min.js

六、计划更新内容

1.可以输出不仅是文字还有dom元素
2.给输出的文字加动画特效
3.输出时加上敲字的声音

七、邀赞👍

如果这篇文章能够帮到你什么，希望能花一点时间帮我点个赞👍b(￣▽￣)d。 =.=戳我点赞😊

八、更新内容说明

1.1.0

更新了输入源可以为一个数组，与原有模式兼容
更新了句子暂停模式（在rollback模式下生效）

  const obj = {
    // 其他省略
    sentencePause: true // 最后一句将会暂停回滚，常显示下去
  }
  // 数组模式 根据顺序一句一句输出
  const inputArr = [`黎明前的黑暗是最深不见底的黑暗！`, `世界上本没有无用的齿轮，只有齿轮自身能决定它的用途！`, `天不生我彭小呆，万古长青一生狂！`]
  const typing = new EasyTyper(obj, inputArr, ()=>{
    // 回调函数，easyTyper生命周期结束后执行
    console.log('结束了，我的使命！')
  }, (output, instance) => {
    // 钩子函数，每一帧的数据获取和实例EasyTyper的获取
    document.getElementById('output').innerHTML = `${output}`
  })

2.0.0

重构源码，全面支持TS！

2.1.0

新增测试功能，引入jest测试框架
新增测试单元，测试命令yarn test

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

easy-typer-js

特点（优势）

去我的站点看真正的效果

一、效果展示

二、使用easy-typer-js

2.1 引入easy-typer-js

2.2 使用它作为你最强大的武器吧！

2.2.1 在原生JS中使用

2.2.2 在Vue中使用

2.2.3 在React中使用

2.3[实战] 实践出真理 ( 完整代码 )

2.3.1 Vue + Vuepress + 一言API === 实现博客首页炫酷文字输出效果

回滚时间sleep设置为0时的效果

2.3.2 在React中

只输出一句话

2.3.3 原生实例

第一句输出后回滚，后面不回滚！

三、参数解析

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

3.2 obj配置

3.3 暴露出可直接调用方法

3.4 源码

四、原理解析与FAQ

4.1 为什么说我们的打字机不进行DOM操作？

4.2 我们怎么做到的不涉及DOM操作的？

五、更多请查阅

六、计划更新内容

七、邀赞👍

八、更新内容说明

1.1.0

2.0.0

2.1.0

回滚时间`sleep`设置为0时的效果