跳过主要内容

文本

快速入门

CDN 链接

gsap.registerPlugin(TextPlugin)

最简用法

//replaces yourElement's text with "This is the new text" 
gsap.to(yourElement, {
  duration: 2,
  text: "This is the new text",
  ease: "none",
});

每次替换一个字符（或者如果你设定delimiter: " "的话，每次替换一个词）。所以当补间动画结束时，DOM元素的文本已被完全替换。这同样意味着，如果你倒放或重启补间动画，文本将被还原。

下面是一个在 yourElement 中替换文本的简单示例：

//replaces yourElement's text with "This is the new text" over the course of 2 seconds
gsap.to(yourElement, {
  duration: 2,
  text: "This is the new text",
  ease: "none",
});

配置对象​

对于高级用法，请设置text为一个对象（比如text:{...}），并使用以下任意属性：

    属性

    描述

  • delimiter

    应该用于拆分文本的字符。默认值是""，所以每个字符都是独立的；但如果你想按词逐词播放，可以使用空格字符，例如
    //replaces word-by-word because the delimiter is " " (a space) gsap.to("#element", {     duration: 2,     text: {         value: "This is the new text",         delimiter: " "     },     ease: "none" });
    .

  • newClass

    应该通过标签应用到新文本上的 CSS 类。这样可以让新文本在视觉上区别于旧文本，比如可能是红色或加粗或者其他样式 —— 只需要在你的 CSS 中创建一个类，并像下面这样传入名称：
    //wraps the old text in  and the new text in a gsap.to("#element", {     duration: 2,     text: {         value: "This is the new text",         newClass: "class2",         oldClass: "class1"     },     ease: "power2" });

  • oldClass

    应该通过标签应用到旧文本上的 CSS 类。

  • padSpace

    如果新文本比旧文本短，可以通过非换行空格 HTML 字符来填充尾随空格，以防止旧文本折叠。如果这是你想要的效果，请在文本对象中设置padSpace: true。

  • preserveSpaces

    如果true，这会强制 TextPlugin 维持额外的空格，通过交换 来使其在 HTML 中显示出来。

  • rtl

    如果true，文本将以从右到左的方式引入（反向顺序）。查看一个此处

  • speed

    自动根据文本变化数量调整补间动画持续时间的持续时间；值为1相对较慢，值为20非常快。没有此功能的情况下，你需要手动指定补间动画的持续时间，而猜测出合适的时间可能很困难（在 2 秒内动画显示 10 个字符与在同一时间段内动画显示 500 个字符看起来会有很大不同）。换句话说，speed让你可以更直观地思考“单位时间内变化的数量”。技术公式是 "0.05 / speed * text_changes"。

  • type

    如果你想只动画显示文本之间的差异部分（跳过起始和结束字符串之间相同位置的字符），请设置type: "diff"（GSAP 3.0.4 新增功能）。例如，如果前 50 个字符是相同的，可能会让人觉得动画有延迟，因为它从头开始逐字显示，因此type: "diff"通过跳过所有相同部分解决了这个问题。

  • 值

    替换文本字符串，如"This is the new text" (必需)
使用对象语法设置特殊属性

如果你使用了上面提到的任何特殊属性，请确保将它们放入自己的对象中，而不是放在主 vars 对象中，就像这样：

//GOOD:
gsap.to(yourElement, {
  duration: 1,
  text: {
    value: "Your new text",
    newClass: "class2",
    delimiter: " ",
  },
});

//BAD:
gsap.to(yourElement, {
  duration: 1,
  text: "Your new text",
  newClass: "class2",
  delimiter: " ",
});

TextPlugin 将识别简单的 HTML 节点如<br>并尊重它们的处理（GSAP 3.0.4 新增功能）。

示例演示​

查看完整系列的文本动画演示在 CodePen 上。

目录