开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

#摘要

在这两天的需求中，我们需要使用到一个打字机效果。当然自己编写也是可以的，但编写过程会花费比较长的时间，这对于项目的进度是不友好的。在看过很多库之后，发现了他TypeIt。

# 简介

在他的官网我们就可以看出是如何使用的，通过.的方式来实现打字机效果。

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 <span class="place">internet</span>', { delay: 400 })
  .delete(".place", { delay: 800, instant: true })
  .type('<em><strong class="font-semibold">planet.</strong></em>', {
    speed: 100,
  })
  .go();

#使用

我使用到时React，因此我下面介绍的主要已react为主

typeit-react官网

安装TypeIt for React

npm install typeit-react

引入

import TypeIt from "typeit-react";

export default () => {
  return (
    <div className="App">
      <TypeIt>This will be typed in a `span` element!</TypeIt>
    </div>
  );
};

这样就会实现一个打字机的效果，他会从第一个字母逐个打印，知道全部显示出来。

## 如何实现回退删除效果呢？

<TypeIt
    getBeforeInit={(instance) => {
        instance.type("This will be typed in a `span` element!")
        .pause(750).delete(9).pause(500).type("web 前端工程师")
        .pause(750).delete(9).pause(500).type("FROM 成都");
        
        // 这里一定要返回instance
        return instance;
    }}
></TypeIt>

属性	含义	参数	用法
pause	停止	number	pause(750) ：停止750毫秒
delete	从当前字符向前删除	number	delete(9) ：向前删除9个字符
type	开始打印	any	type("FROM 成都") ：打印 FROM 成都

# 如何循环打印

需要添加option属性 有关Options属性的文档，大家可以点击查看，来看看其他属性。我个人只需要使用loop就可以满足我的业务需求了。

<TypeIt
    getBeforeInit={(instance) => {
        instance.type("黄祺文 QIWEN").pause(750).delete(9)
        .pause(500).type("web 前端工程师").pause(750)
        .delete(9).pause(500).type("FROM 成都");
        return instance;
    }}
    // 循环打印
    options={{ loop: true }}
></TypeIt>

总结

这个插件帮助我解放了生产力，我可以在很短的时间内完成项目所需的效果。本文只是简单的介绍如何使用，想要深入学习的同学请查看文档进行深入学习。