easy-typer-js

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

一、效果展示

image

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

二. 使用easy-typer-js

1. 引入easy-typer-js

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

1
2
3
4

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

1
2
3
4

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

方法2: 常规导入

1
2
3
4
5

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

//cdn导入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/easyTyper.min.js"></script>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<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原生实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

效果如下

image

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

三、参数解析 ( Parameter configuration )

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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配置

参数(params)	含义(meaning)	默认值(default)
output	输出内容,使用MVVM框架时直接使用 {{ obj.output }}	NA
type	下一次的行为 'roolback', 'normal', 'custom'	NA
isEnd	全局控制是否终止	NA
speed	打字速度	NA
backSpeed	回滚速度	NA
sleep	完整输出完一句话后，睡眠时间一定时间后回滚	NA
singleBack	单次的回滚（优先级高于type）	NA

3.3 暴露出可直接调用方法

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

四、更多请查阅

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

码农家园

[JS插件]功能十分强大的打字机效果: easy-typer-js