Skip to content
功能十分强大打字机插件,文档预览地址:
JavaScript TypeScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
babel.config.js
package.json
tsconfig.json

README.md

easy-typer-js

Version License Downloads

功能十分强大打字机插件,兼容原生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/easy-typer-js@1.0.3/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>

效果如下就是首页你们可以看到的啦!🐷

回滚时间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/easy-typer-js@1.0.3/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操作的?

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

五、更多请查阅

六、计划更新内容

  • 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
You can’t perform that action at this time.