GSAP动画插件-TextPlugin

本篇文章是GSAP系列的一篇文章，关于web动画，目前我已经发布了以下文章：

web动画篇：

用CSS做出漂亮的字体动画
HTML动画的那些事-车轮旋转篇

GSAP篇：

GSAP（GreenSock）：最健全的web动画库之一
GSAP动画插件-ScrollTrigger（一）
GSAP动画插件-Flip Plugin（一）

其中web动画也可能会用到一定的GSAP动画库的知识。

GSAP是一个非常优秀的动画库，但是不知道为什么中文资料非常少，几乎很少有人会提到GSAP，并且它拥有非常宽裕的使用协议，几乎大部分商业用途都可以免费使用，它的英文文档也非常健全，可以说只要是你见过的web动画，都可以使用GSAP进行实现。

今天的主角是TextPlugin插件，听名字都知道它是一个专门处理文字相关的插件，平时在我们的网页制作中，有时候需要使用打字机效果，就可以通过该插件进行实现。

之前我有一篇文章介绍了一个易用的打字机插件：打字机效果插件Typed.js，使用方法非常简单。

今天介绍的这个GSAP插件，使用方法也同样简单。

1. 使用

基础用法如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="ie=edge" http-equiv="X-UA-Compatible" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/TextPlugin.min.js"></script>
    <title>Title</title>
    <style>
     body {
       display: flex;
       justify-content: center;
     }
    </style>
  </head>
  <body>
  <h1 id="myText"></h1>
    <script>
      // 进行操作
      gsap.to("#myText", {
        duration: 2,
        text:"TextPlugin的使用",
        delay: 1,
      });
    </script>
  </body>
</html>

最核心的代码即为text: xxx。

1.1 value

需要替换的值。

1.2 delimiter

设置分隔符，如果不设置该属性，则会将每个字符作为单独的一个字符，一个一个的进行显示。

如果设置了该属性，会将给定的字符按照分隔符进行分割，再进行显示。

没有设置该属性：

设置该属性为：delimiter: " "，即以空格进行分割。

gsap.to("#myText", {
  duration: 2,
  text: { value: "thank you for waiting", delimiter: " " },
  delay: 1,
});

1.3 newClass

如果设置了该属性，替换后的文字会被包含在<span>中，同时添加新的类名：

gsap.to("#myText", {
  duration: 2,
  text: {
    value: "Text",
    padSpace: true,
    newClass:"blue",
  },
  delay: 1,
});

1.4 oldClass

跟上面一样，不过这是被替换的文字会包含在<span>中，同时添加指定的类名。

1.5 padSpace

如果新文本比旧文本短，则可以设置padSpace: true，它会用空格替代差值属性，以保证格式正确。

1.6 speed

控制字体的替换速度，1为最慢，20为最快。

如果没有该属性就必须设置gsap下的delay即持续时间属性。

1.7 type

<h1 id="myText">TextPlugin收看</h1>
<script>
  gsap.to("#myText", {
    duration: 2,
    text: {
      value: "TextPlugin的使用",
      type: "diff",
    },
    delay: 1,
  });
</script>