Vue3 + TypeScript 实现自动打字、打字机动画、动画打字工具（TypeIt）

一、介绍  

TypeIt是一个JavaScript库，用于创建简单而流畅的打字效果和动画效果。它可以用于网页开发中的很多场景，例如创建动态文字效果、制作页面过渡动画、增强用户体验等。

我们还可以利用它进行一些后端日志的回显，如果某个进程后端实时或者定时返回结果，前端进行一个动画打字的回显功能，一方面可以让我们的页面更丰富，另一方面可以给客户一个很好的体验。

配置项说明    

名称	默认值	参数类型	描述
strings	[]	string | array	要键入的文本字符串。
speed	100	number	打字速度，每步之间以毫秒为单位测量
deleteSpeed	null	number | null	删除速度。如果留空，将是类型速度的 1/3。
lifeLike	true	boolean	使打字速度不规则，就好像真人在做一样。
cursor	true	boolean | CursorOptions	在字符串末尾显示闪烁的光标， 或覆盖默认动画
cursorSpeed	1000	number	光标的闪烁速度，以毫秒为单位。
cursorChar	|	string	用于光标的字符。HTML 也可以！
breakLines	true	boolean	控制是否将多个字符串打印在彼此之上
nextStringDelay	750	number | array	键入多个字符串之间的时间量
waitUntilVisible	false	boolean	确定实例是在 上自动开始键入.go()， 还是仅当目标元素在视口中可见时 才开始键入
startDelete	false	boolean	是否通过删除元素内的字符串开始实例， 然后键入通过 JSON 或 伴随函数定义的字符串
startDelay	250	number	插件初始化后开始输入之前的时间量。
loop	false	boolean	您的字符串是否会在完成后继续循环。
loopDelay	null	number | array	再次循环一个字符串或一 组字符串之间的时间量
html	true	boolean	控制字符串是被解析为 HTML

二、安装依赖  

yarn add typeit

三、使用  

1、官网示例   

new TypeIt("#hero", {
  speed: 50,
  startDelay: 900,
})
  .type("the mot versti", { delay: 100 })
  .move(-8, { delay: 100 })
  .type("s", { delay: 400 })
  .move(null, { to: "START", instant: true, delay: 300 })
  .move(1, { delay: 200 })
  .delete(1)
  .type("T", { delay: 225 })
  .pause(200)
  .move(2, { instant: true })
  .pause(200)
  .move(5, { instant: true })
  .move(5, { delay: 200 })
  .type("a", { delay: 350 })
  .move(null, { to: "END" })
  .type("le typing utlity")
  .move(-4, { delay: 150 })
  .type("i")
  .move(null, { to: "END" })
  .type(' on the internet', { delay: 400 })
  .delete(".place", { delay: 800, instant: true })
  .type('planet.', {
    speed: 100,
  })
  .go();

2、效果   

四、模拟异步请求 不断追加内容  

1、API   

这里的话我用延迟器模拟数据在不断的更新，比如每次返回的数据都是最新的，我只需要追加在后面即可，那根据官方的demo，只需要使用type和flush。

2、完整代码   

五、模拟异步请求 不断更新内容  

这里的话我用延迟器模拟数据在不断的更新，但是每次返回的数据都是追加过的内容，需要把新的数据内容提取出来追加在现有的数据上，我这里只是一个demo，自己根据自己的情况去提取，然后api的话和上面一样的。

不管是哪一种方式，体现出来的动画都是一样的。 

我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏。