easy-typer-js
功能十分强大打字机插件,兼容原生JS和MVVM类框架(Vue,React,angular),随心所欲的输出任何你想输出的内容。
特点(优势)
与其他相似的打字机插件我们的有点在哪里?
-
- 我们的打字机不操作DOM,重要的事情讲三遍,不操作DOM!不操作DOM!不操作DOM!
-
- 我们的打字机与MVVM框架结合性能超棒!
-
- 我们的打字机只改变数据对象的输出,并不对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
// 引入// 实例化const typed = 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 = obj `黎明前的黑暗是最深不见底的黑暗!` { // 回调函数 // 此回调一般用于获取新的数据然后循环输出 // instance { 实例EasyTyper } console // 打印出实例对象 } { // 钩子函数 // output { 当前帧的输出内容 } // instance { 实例EasyTyper } // 通过钩子函数动态更新dom元素 documentinnerHTML = `` }
2.2.2 在Vue中使用
打开页面你会发现
我将要被打字机输出
这句话被一个一个字敲
出来!
// 动态绑定 {{ obj.output }}
2.2.3 在React中使用
打开页面你会发现
我是被React所创造出来的!
这句话上帝所诉说!
Component { superprops thisstate = output: '' typer: null thisinitTyper = thisinitTyper thischangeOutput = thischangeOutput } { // 配置对象 const obj = output: '' isEnd: false speed: 80 singleBack: false sleep: 0 type: 'normal' backSpeed: 40 sentencePause: false // 实例化 thistyper = obj '我是被React所创造出来的!' thiscompleteAsentence thischangeOutput } // 输出完毕后的回调函数 { console } // 钩子函数和setState结合 { this } { return <p>thisstateoutput</p> }
2.3[实战] 实践出真理 ( 完整代码 )
2.3.1 Vue + Vuepress + 一言API === 实现博客首页炫酷文字输出效果
以下为完整代码!!!
{{ obj.output }} |
<script> name: 'home' { return obj: output: '' isEnd: false speed: 80 singleBack: false sleep: 0 type: 'rollback' backSpeed: 40 sentencePause: false } { this } methods: // 初始化 { this } { // 一言Api进行打字机循环输出效果
<style lang="stylus"> .typed-cursor margin-left: 10px opacity: 1 animation: blink 0.7s infinite 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中
Component { superprops thisstate = output: '' typer: null thisinitTyper = thisinitTyper thischangeOutput = thischangeOutput } { this } { thistyper } { // 配置对象 const obj = output: '' isEnd: false speed: 80 singleBack: false sleep: 0 type: 'normal' backSpeed: 40 sentencePause: false // 实例化 thistyper = obj '我是被React所创造出来的!' thiscompleteAsentence thischangeOutput } // 输出完毕后的回调函数 { console } // 钩子函数和setState结合 { this } { return <div className="App"> <header className="App-header"> <img src=logo className="App-logo" alt="logo" /> <p>thisstateoutput</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > 上帝 </a> </header> </div> }
效果如下
只输出一句话
2.3.3 原生实例
const obj = output: '' // 输出内容 使用MVVM框架时可以直接使用 type: 'normal' isEnd: false speed: 80 backSpeed: 40 sleep: 3000 singleBack: true sentencePause: falseconst typing = obj `黎明前的黑暗是最深不见底的黑暗!` { // 回调函数 如果这里使用了递归调用会一直循环打印,需要在外部触发停止 // 此回调用于获取新的数据然后重新输出 instanceinput = `天不生我彭小呆,万古长青一生狂!` instance } { // 钩子函数,每一帧的数据获取和实例easy-typer-js的获取 documentinnerHTML = `|`}// 12秒后停止let timer =
效果如下!!!
第一句输出后回滚,后面不回滚!
三、参数解析
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/easy-typer-js@1.0.3/easy-typer-min.js
六、计划更新内容
- 1.可以输出不仅是文字还有dom元素
- 2.给输出的文字加动画特效
- 3.输出时加上敲字的声音
七、邀赞👍
如果这篇文章能够帮到你什么,希望能花一点时间帮我点个赞👍b( ̄▽ ̄)d。 =.=戳我点赞😊
八、更新内容说明
1.1.0
- 更新了输入源可以为一个数组,与原有模式兼容
- 更新了句子暂停模式(在rollback模式下生效)
const obj = // 其他省略 sentencePause: true // 最后一句将会暂停回滚,常显示下去 // 数组模式 根据顺序一句一句输出 const inputArr = `黎明前的黑暗是最深不见底的黑暗!` `世界上本没有无用的齿轮,只有齿轮自身能决定它的用途!` `天不生我彭小呆,万古长青一生狂!` const typing = obj inputArr { // 回调函数,easyTyper生命周期结束后执行 console } { // 钩子函数,每一帧的数据获取和实例EasyTyper的获取 documentinnerHTML = `` }
2.0.0
- 重构源码,全面支持TS!
2.1.0
- 新增测试功能,引入
jest
测试框架 - 新增测试单元,测试命令
yarn test